import React, {useContext, useEffect, useState} from "react";
import {ScrollView, Text, View} from "react-native";

import {useNavigationState} from "@react-navigation/native";
import {StackScreenProps} from "@react-navigation/stack";

import Alert from "@components/alert";
import Background from "@components/background";
// import DaikinLiteWifiAlert from "@components/daikinLiteWifiStateAlert";
import Icon from "@components/icon";
import Label from "@components/label";
import Button from "@components/primaryButton";

import {DEFAULT_INITIAL_ALERT_STATUS} from "@config/constants/AppConstants";
import {HomeNavigatorParamList} from "@config/constants/NavConstants";
import {ALTHERMA_SSID} from "@config/constants/ThermostatConstants";
import {MINI_SPLIT_CONNECT_TIMEOUT} from "@config/constants/TimeoutConstants";
import {translationKeys} from "@config/constants/TranslationConstants";
import Images from "@config/Images";
import {getLocalizationContext} from "@config/Translations";
import {iAlertState} from "@config/types/CommonTypes";

import {useAppDispatch} from "@store/Hooks";
import {
	hideLoader as hideFanLoader,
	showLoader as showFanLoader,
} from "@store/loader/LoaderSlice";

// import Page from "@styles/Page";
import {useThemeAwareObject} from "@styles/theming/ThemingHelper";
import {isConnectedToSSIDPrefix, timeout} from "@utils/WifiManagerUtils";

import Styles from "./Styles";

type Props = StackScreenProps<HomeNavigatorParamList, "AlthermaAPIsTestScreen">;

const AlthermaAPIsTestScreen = ({navigation}: Props) => {
	const {translate} = useContext(getLocalizationContext());
	const styles = useThemeAwareObject(Styles.createStyles);

	const dispatch = useAppDispatch();
	const routes = useNavigationState((state) => {
		return state.routes;
	});

	const [alertStatus, setAlertStatus] = useState<iAlertState>(
		DEFAULT_INITIAL_ALERT_STATUS,
	);

	const closeButton = () => {
		return (
			<Icon
				Image={Images.svgIcons.crossButton}
				color={styles.crossIcon.color}
				onPress={async () => {
					await reboot();
				}}
			/>
		);
	};

	useEffect(() => {
		navigation.setOptions({
			headerLeft: (): JSX.Element => {
				return closeButton();
			},
		});
	}, []);

	const showLoader = (loading: boolean) => {
		if (loading) {
			dispatch(showFanLoader());
		} else {
			dispatch(hideFanLoader({className: "AlthermaAPIsTestScreen"}));
		}
	};

	const navigateBack = () => {
		showLoader(false);
		const filteredRoutes = routes.filter((item) => {
			return item.name === "ConfigureThermostatScreen";
		});
		if (filteredRoutes.length > 0) {
			navigation.pop(1);
		}
		navigation.goBack();
	};

	const reboot = async () => {
		showLoader(true);
		/**
		 * Check if still connected to thermostat hotspot
		 * If yes call reboot api, we won't check for status because irrespective of the result we need to take user back
		 * If not then just navigate back
		 */
		const isConnectedToMiniSplitSSID =
			await isConnectedToSSIDPrefix(ALTHERMA_SSID);
		if (isConnectedToMiniSplitSSID.isConnected) {
			// await rebootAdapter();
			await timeout(MINI_SPLIT_CONNECT_TIMEOUT);
			navigateBack();
		} else {
			navigateBack();
		}
	};

	const onDismissAlert = () => {
		// setIsFetchingWifiList(false);
		setAlertStatus({
			isVisible: false,
			buttonAlignment: alertStatus.buttonAlignment,
			title: alertStatus.title,
			message: alertStatus.message,
			positiveBtnLabel: alertStatus.positiveBtnLabel,
			negativeBtnLabel: alertStatus.negativeBtnLabel,
			onPress: null,
			onCancel: null,
		});
	};

	return (
		<Background style={styles.root}>
			<View style={styles.container}>
				{/* <DaikinLiteWifiAlert
					ssidPrefix={ALTHERMA_SSID}
					navigation={navigation}
				/> */}
				<Alert
					visible={alertStatus.isVisible}
					title={alertStatus.title}
					buttonAlignment={alertStatus.buttonAlignment}
					description={alertStatus.message}
					positiveButtonTitle={
						alertStatus.positiveBtnLabel ||
						translate(translationKeys.alert.okayButtonLabel)
					}
					negativeButtonTitle={alertStatus.negativeBtnLabel}
					alternateButtonTitle={alertStatus.alternativeBtnLabel}
					onPress={alertStatus.onPress || onDismissAlert}
					onCancel={alertStatus.onCancel || onDismissAlert}
					onPressAlternate={alertStatus.onPressAlternate || onDismissAlert}
				/>
				<Label
					text="Click on the buttons below to check the Altherma APIs"
					style={styles.description}
				/>

				<Button
					title="Run Scan API"
					style={[styles.scanButton]}
					onPress={onDismissAlert}
				/>
				<Button
					title="Run Networks API"
					style={[styles.scanButton]}
					onPress={onDismissAlert}
				/>
				<Button
					title="Run Settings API"
					style={[styles.scanButton]}
					onPress={onDismissAlert}
				/>
				<Button
					title="Run Info API"
					style={[styles.scanButton]}
					onPress={onDismissAlert}
				/>
				<View style={styles.responseWrapper}>
					<ScrollView
						style={styles.responseContainer}
						contentContainerStyle={{flexGrow: 1}}
					>
						<Text style={styles.responseText}>
							{alertStatus.title ||
								"API response will appear herecjc \n cj cjlc c cj cjac cl scdhc hk."}
						</Text>
					</ScrollView>
				</View>
			</View>
		</Background>
	);
};

export default AlthermaAPIsTestScreen;
this is my code and this import {AxiosError, AxiosInstance, AxiosResponse} from "axios";

import {
	iNetworkError,
	iNetworkResult,
	iWLANInfo,
	iWLANScanResponse,
	iWLANSettings,
} from "@config/types/AppDataTypes/AlthermaTypes";

import {apiEndpoints} from "./axiosConfig/AxiosServiceConstants";

type ApiResult<T> = iNetworkResult<T> | iNetworkError;

const AlthermaService = (apiServer: AxiosInstance) => {
	// TODO: The error type is currently unknown; consider updating the network interface in AlthermaTypes.ts to accommodate this.
	/**
	 * Generic method to handle API requests and responses
	 * @param requestFn API request function to execute
	 * @returns Promise with specified response
	 */
	const handleApiRequest = async <T>(
		requestFn: () => Promise<AxiosResponse<T>>,
	): Promise<ApiResult<T>> => {
		try {
			const response = await requestFn();
			return {
				error: null,
				status: response.status,
				data: response.data,
			} as iNetworkResult<T>;
		} catch (error) {
			const axiosError = error as AxiosError;
			if (axiosError.response) {
				const {status, data} = axiosError.response;
				return {
					error: data,
					status,
					data,
				} as iNetworkError;
			}
			// throw again if the error is not an Axios error with a response
			throw error;
		}
	};

	/**
	 * scan for available WiFi networks
	 */
	const scanWifiNetworks = () => {
		return handleApiRequest(() => {
			return apiServer.post(apiEndpoints.wifi.ap.scan);
		});
	};

	/**
	 * Fetch the list of available WiFi networks
	 */
	const getAvailableNetworks = () => {
		return handleApiRequest<iWLANScanResponse>(() => {
			return apiServer.get(apiEndpoints.wifi.ap.networks);
		});
	};

	/**
	 * Configures and connects to a WiFi network
	 */
	const configureWifiConnection = (settings: iWLANSettings) => {
		return handleApiRequest(() => {
			return apiServer.put(apiEndpoints.wifi.ap.settings, settings);
		});
	};

	/**
	 * Gets current WLAN connection information
	 */
	const getWlanInfo = () => {
		return handleApiRequest<iWLANInfo>(() => {
			return apiServer.get(apiEndpoints.wifi.ap.info);
		});
	};

	return {
		scanWifiNetworks,
		getAvailableNetworks,
		configureWifiConnection,
		getWlanInfo,
	};
};

export default AlthermaService;
is altherma service layer and import AlthermaService from "./AlthermaService";

import {apiServer} from "./axiosConfig";

const althermaService = AlthermaService(apiServer);

export {althermaService};
 this is index.ts how can I call these apis on click of each of the button and store the response in the textview inside the scroll view