import React, { useEffect, useState } from 'react';
import { Avatar, Pressable, HStack, Center, VStack } from 'native-base';
import { HeatPumpState } from '../../models/heatpump';
import { usePrevious, useDarkMode } from '../../hooks';
import { Ionicons, FontAwesome } from '@expo/vector-icons';
import * as SplashScreen from 'expo-splash-screen';
import { CustomCaretUpIcon } from '../ui';
import { HeatingSettings, WaterTankSettings, CoolingSettings } from '../modeSettings';
import { COLORS } from '../../theme';
import { useGetHeatPumpConfig } from '../../queries/heatpump';

type ModeTabsProps = {
  state: HeatPumpState;
};

const ModeTabs = ({ state }: ModeTabsProps) => {
  const [activeTab, setActiveTab] = useState<2 | 4 | 16>(2);
  const { mode: currentMode } = state || { mode: 0 };
  const previousMode = usePrevious(state?.mode);
  const { data: config } = useGetHeatPumpConfig();

  const isDarkMode = useDarkMode();

  useEffect(() => {
    const kkk = async () => {
      // at app start, set active tab according to current mode
      if (
        previousMode === undefined &&
        state?.mode !== undefined &&
        (state.mode === 2 || state.mode === 4 || state.mode === 16)
      ) {
        setActiveTab(state.mode);
        // Awaful temporary prevention of the white screen after the splashscreen.
        // Unfortunately the issue seems to be dig deep in some package or component.
        // I was not able figure it out.
        setTimeout(SplashScreen.hideAsync, 500);
      }
    };
    kkk();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [state]);
  const avatarProps = {
    size: 'lg',
    borderWidth: 3,
    shadow: '0',
    icon: {
      size: 30,
      color: isDarkMode ? COLORS.white : COLORS.gray[900],
    },
  };

  return (
    <>
      <HStack className="mt-5 items-start justify-between px-4">
        {/* heating mode */}
        <VStack className="items-center">
          <Pressable onPress={() => setActiveTab(2)}>
            <Avatar {...avatarProps}>
              <Ionicons name="sunny" {...avatarProps.icon} />
              {currentMode === 2 && <Avatar.Badge />}
            </Avatar>
          </Pressable>
          {activeTab === 2 && config && <CustomCaretUpIcon isDarkMode={isDarkMode} />}
        </VStack>
        {/* water tank mode */}
        <Center>
          <Pressable onPress={() => setActiveTab(4)}>
            <Avatar {...avatarProps}>
              <FontAwesome name="shower" {...avatarProps.icon} />
              {currentMode === 4 && <Avatar.Badge />}
            </Avatar>
          </Pressable>
          {activeTab === 4 && config && <CustomCaretUpIcon isDarkMode={isDarkMode} />}
        </Center>
        {/* cooling mode */}
        <Center>
          <Pressable onPress={() => setActiveTab(16)}>
            <Avatar {...avatarProps}>
              <Ionicons name="snow" {...avatarProps.icon} />
              {currentMode === 16 && <Avatar.Badge />}
            </Avatar>
          </Pressable>
          {activeTab === 16 && config && <CustomCaretUpIcon isDarkMode={isDarkMode} />}
        </Center>
      </HStack>

      {activeTab === 2 && (
        <HeatingSettings currentMode={state?.mode ?? 0} config={config} state={state} />
      )}
      {activeTab === 4 && config && (
        <WaterTankSettings currentMode={state?.mode ?? 0} config={config} />
      )}
      {activeTab === 16 && config && (
        <CoolingSettings currentMode={state?.mode ?? 0} config={config} />
      )}
    </>
  );
};

export default ModeTabs;
