import { FontAwesome5 } from '@expo/vector-icons';
import React, { useState } from 'react';
import { Switch, View, useColorModeValue } from 'native-base';
import { COLORS } from '../../theme';
import { useSetRelay } from '../../queries/evok';
import cn from 'classnames';
import { HStack, Pressable, Text, VStack } from 'native-base';
import { Card } from '../ui';

type DOCardProps = {
  circuit: string;
  onPress: VoidFunction;
};

const DOCard = ({ circuit, onPress }: DOCardProps) => {
  const { mutate } = useSetRelay();
  const [relay, setRelay] = useState<boolean>(false);
  const iconColor = useColorModeValue(
    relay ? COLORS.yellow[400] : COLORS.blue[900],
    relay ? COLORS.yellow[400] : COLORS.blue[50],
  );

  const onValueChangeHandler = () => {
    setRelay(prev => !prev);
    mutate(
      { circuit, data: { value: relay ? 0 : 1 } },
      {
        onError: () => {
          setRelay(prev => !prev);
        },
      },
    );
  };

  return (
    <View className="w-1/2 p-3">
      <Card>
        <Pressable className={cn('min-h-[72px]')} onPress={onPress}>
          <VStack>
            <HStack className="gap-x-3" justifyContent="space-between">
              <FontAwesome5 name="lightbulb" size={36} color={iconColor} />
              <Switch onToggle={() => onValueChangeHandler()} isChecked={relay} />
            </HStack>
            <Text className="text-center text-2xl font-bold">{circuit}</Text>
          </VStack>
        </Pressable>
      </Card>
    </View>
  );
};

export default DOCard;
