import React from 'react';
import { Heading, Spinner, View } from 'native-base';
import { useUpdateCoolingConfig } from '../../queries/heatpump';
import { TemperatureSetter } from '../ui';
import { HeatPumpConfig } from '../../models/heatpump';
import ModeSettings from './ModeSettings';
import { HEAT_PUMP_STATE_MODES } from '../../constants';

type CoolingSettingsProps = {
  currentMode: keyof typeof HEAT_PUMP_STATE_MODES;
  config?: HeatPumpConfig;
};

const CoolingSettings = ({ currentMode, config }: CoolingSettingsProps) => {
  const { mutate: updateCoolingConfig } = useUpdateCoolingConfig();

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

  return (
    <ModeSettings mode={16} isChecked={!!(currentMode === 16)}>
      <View className="my-3">
        <Heading size="sm" className="mb-3">
          Cooling temperature
        </Heading>
        <TemperatureSetter
          maximumValue={28}
          initialValue={config.cooling_temperature}
          onDone={value => updateCoolingConfig({ cooling_temperature: value })}
        />
      </View>
    </ModeSettings>
  );
};

export default CoolingSettings;
