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

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

const WaterTankSettings = ({ currentMode, config }: WaterTankSettingsProps) => {
  const { mutate: updateWaterTankConfig } = useUpdateWaterTankConfig();

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

  return (
    <ModeSettings mode={4} isChecked={!!(currentMode === 4)}>
      <View className="my-3">
        <Heading size="sm" className="mb-3">
          Water temperature
        </Heading>
        <TemperatureSetter
          maximumValue={60}
          initialValue={config.water_tank_temperature}
          onDone={value => updateWaterTankConfig({ water_tank_temperature: value })}
        />
      </View>
    </ModeSettings>
  );
};

export default WaterTankSettings;
