import { RootDrawerScreenProps } from '../models/navigation';
import { Spinner, View, ScrollView, Heading, Text } from 'native-base';
import {
  useGetHeatPumpConfig,
  useUpdateHeatingConfig,
  useUpdateWaterTankConfig,
} from '../queries/heatpump';
import SelectOperatingMode from '../components/configuration/SelectOperatingMode';
import { Card, TemperatureSetter } from '../components/ui';
import { HEAT_PUMP_MODELS } from '../constants';
import GeneralInfoRow from '../components/home/GeneralInfoRow';

const HeatPumpSettingsScreen = (_: RootDrawerScreenProps<'HeatPumpSettings'>) => {
  const { data: config, isLoading } = useGetHeatPumpConfig({ refetchOnMount: false });
  const { mutate: updateHeatingConfig } = useUpdateHeatingConfig();
  const { mutate: updateWaterTankConfig } = useUpdateWaterTankConfig();

  if (isLoading) return <Spinner size="lg" />;

  if (!config) return null;

  return (
    <ScrollView showsVerticalScrollIndicator={false}>
      <View className="gap-y-4 p-4">
        <Card title="General">
          <GeneralInfoRow label="Heat pump model" value={HEAT_PUMP_MODELS[config.model]} />
          <GeneralInfoRow
            label="Electric heating turns on below"
            value={`${config.shutdown_protection_temperature}°C`}
          />
        </Card>
        <SelectOperatingMode config={config} />
        <Card title="Heating">
          <GeneralInfoRow
            label="Heating type"
            value={config.heating_type === 0 ? 'Floor heating' : 'Heat sink'}
          />
          <GeneralInfoRow
            label="Electric heating mode"
            value={`${config.room_electric_heating_mode === 0 ? 'Automatic' : 'Manual'}`}
          />
          <Heading size="sm" className="mb-1 mt-0.5">
            Start hysteresis:
          </Heading>
          <Text className="mb-2 text-xs">
            The temperature difference between the current and desired temperatures before the heat
            pump turns on the room heating.
          </Text>
          <TemperatureSetter
            minimumValue={0}
            maximumValue={10}
            initialValue={config.heating_hysteresis}
            onDone={value => updateHeatingConfig({ heating_hysteresis: value })}
          />
        </Card>
        <Card title="Water tank">
          <GeneralInfoRow
            label="Water maximum temperature"
            value={`${config.heating_water_maximum_temperature}°C`}
          />
          <Heading size="sm" className="mb-1 mt-0.5">
            Start hysteresis:
          </Heading>
          <Text className="mb-2 text-xs">
            The temperature difference between the current and desired temperatures before the heat
            pump turns on the water tank heating.
          </Text>
          <TemperatureSetter
            minimumValue={0}
            maximumValue={10}
            initialValue={config.water_tank_hysteresis}
            onDone={value => updateWaterTankConfig({ water_tank_hysteresis: value })}
          />
        </Card>
        <Card title="Defrosting">
          <GeneralInfoRow label="Mode" value={config.defrost_mode === 0 ? 'Automatic' : 'Manual'} />
          <GeneralInfoRow label="Into temperature" value={`${config.defrost_into_temperature}°C`} />
          <GeneralInfoRow label="Exit temperature" value={`${config.defrost_exit_temperature}°C`} />
          <GeneralInfoRow
            label="Defrost entry cycle time"
            value={`${config.defrost_entry_cycle_time} minutes`}
          />
          <GeneralInfoRow
            label="Defrost maximum time"
            value={`${config.defrost_maximum_time} minutes`}
          />
        </Card>
      </View>
    </ScrollView>
  );
};

export default HeatPumpSettingsScreen;
