import React from 'react';
import { Select, useColorModeValue, Text } from 'native-base';
import { useSetHeatPumpMode } from '../../queries/heatpump';
import { FontAwesome } from '@expo/vector-icons';
import { HEAT_PUMP_CONFIGURATION_MODES } from '../../constants';
import { Card } from '../ui';
import { HeatPumpConfig } from '../../models/heatpump';
import { COLORS } from '../../theme';

type SelectOperatingModeProps = { config: HeatPumpConfig };

const SelectOperatingMode = ({ config }: SelectOperatingModeProps) => {
  const { mutate: setHPMode } = useSetHeatPumpMode();
  const selectedItemIconColor = useColorModeValue(COLORS.gray[700], COLORS.white);

  return (
    <Card title="Select operating mode:" className="mt-4" showDivider={false}>
      <Text className="mb-2 text-xs">
        Automatic mode will automatically switch between two modes
      </Text>
      <Select
        accessibilityLabel="Heat pump mode"
        onValueChange={val => setHPMode({ mode: parseInt(val) })}
        selectedValue={config.mode.toString()}
        _selectedItem={{
          bg: COLORS.blue[200],
          _dark: { bg: COLORS.blue[800] },
          endIcon: <FontAwesome name="check" color={selectedItemIconColor} size={26} />,
        }}
        variant="outline"
      >
        {HEAT_PUMP_CONFIGURATION_MODES.map(({ label, value }) => (
          <Select.Item
            py="4"
            px="3"
            fontSize="2xl"
            borderRadius="xl"
            key={`heat-pump-mode-${value}`}
            label={label}
            bg={COLORS.gray[50]}
            _dark={{ bg: COLORS.gray[700] }}
            value={value.toString()}
          />
        ))}
      </Select>
    </Card>
  );
};

export default SelectOperatingMode;
