import React, { PropsWithChildren } from 'react';
import { Checkbox, Divider, HStack, Heading, Text } from 'native-base';
import { HEAT_PUMP_STATE_MODES } from '../../constants';
import { Card } from '../ui';
import { useSetHeatPumpMode } from '../../queries/heatpump';

type ModeSettingsProps = {
  mode: keyof typeof HEAT_PUMP_STATE_MODES;
  isChecked: boolean;
};

const ModeSettings = ({ isChecked, mode, children }: PropsWithChildren<ModeSettingsProps>) => {
  const { mutate: setHPMode } = useSetHeatPumpMode();

  return (
    <Card>
      <HStack className="items-center justify-between gap-x-2">
        <Heading size="sm">{HEAT_PUMP_STATE_MODES[mode]}</Heading>
        <HStack className="gap-x-2">
          <Text>Active</Text>
          <Checkbox
            isChecked={isChecked}
            value={mode.toString()}
            onChange={() => {
              !isChecked && setHPMode({ mode });
            }}
            accessibilityLabel="Set mode as active"
            className="rounded-full"
          />
        </HStack>
      </HStack>
      <Divider className="my-2" />
      {children}
    </Card>
  );
};

export default ModeSettings;
