import React from 'react';
import { Center, Divider, HStack, Heading, Spinner, View, useColorModeValue } from 'native-base';
import { useUpdateHeatingConfig } from '../../queries/heatpump';
import { DotIcon, RotatingIcon, TemperatureSetter } from '../ui';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { COLORS } from '../../theme';
import ModeSettings from './ModeSettings';
import { HEAT_PUMP_STATE_MODES } from '../../constants';
import { HeatPumpConfig, HeatPumpState } from '../../models/heatpump';

type HeatingSettingsProps = {
  currentMode: keyof typeof HEAT_PUMP_STATE_MODES;
  state: HeatPumpState;
  config?: HeatPumpConfig;
};

const HeatingSettings = ({ currentMode, config, state }: HeatingSettingsProps) => {
  const { mutate: updateHeatingConfig } = useUpdateHeatingConfig();

  const fanIconColor = useColorModeValue(COLORS.gray[800], COLORS.gray[100]);
  const iconBgColor = useColorModeValue(COLORS.gray[200], COLORS.gray[600]);

  // this should never happen as config is prefetched, but just in case
  if (!config || !state) return <Spinner size="lg" />;

  return (
    <ModeSettings mode={2} isChecked={!!(currentMode === 2)}>
      {/* Floor heating temperature */}
      <View className="my-3">
        <Heading size="sm" className="mb-3">
          Floor temperature
        </Heading>
        <TemperatureSetter
          initialValue={config.heating_floor_temperature}
          onDone={value => updateHeatingConfig({ heating_floor_temperature: value })}
        />
      </View>

      <Divider className="my-3" />
      <HStack className="items-center gap-x-2">
        <Heading size="sm">Electric heating</Heading>
        <DotIcon active={state?.electric_heating.running && state?.mode === 2} />
      </HStack>

      {state.electric_heating.running && state?.mode === 2 && (
        <HStack className="mt-2 gap-x-4">
          <Center bgColor={iconBgColor} className="flex-1 rounded-xl p-4">
            <MaterialCommunityIcons
              name={`signal-cellular-${state.electric_heating.intensity ?? 1}`}
              size={40}
              color={fanIconColor}
            />
          </Center>
          <Center bgColor={iconBgColor} className="flex-1 rounded-xl p-4">
            {state.electric_heating.fan_speed ? (
              <RotatingIcon speed={state.electric_heating.fan_speed}>
                <MaterialCommunityIcons name="pinwheel" size={40} color={fanIconColor} />
              </RotatingIcon>
            ) : (
              <MaterialCommunityIcons name="pinwheel" size={40} color={fanIconColor} />
            )}
          </Center>
        </HStack>
      )}
    </ModeSettings>
  );
};

export default HeatingSettings;
