import {
  Button,
  chakra,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
  Spinner,
  Text,
  useToast,
} from '@chakra-ui/react';
import { FC, useState } from 'react';
import { DocumentMinusIcon } from '@heroicons/react/24/outline';
import { Icon } from 'components/icon';
import { useTranslation } from 'react-i18next';
import { useUsers } from 'stores';

export const ResetIcon = chakra(DocumentMinusIcon, {
  baseStyle: {
    w: 5,
    h: 5,
  },
});

type DeleteUserModalProps = {};

export const ResetAllUsageModal: FC<DeleteUserModalProps> = () => {
  const [loading, setLoading] = useState(false);
  const { isResetingAllUsage, onResetAllUsage, resetAllUsage } = useUsers();
  const { t } = useTranslation();
  const toast = useToast();
  const onClose = () => {
    onResetAllUsage(false);
  };
  const onReset = () => {
    setLoading(true);
    resetAllUsage()
      .then(() => {
        toast({
          title: t('resetAllUsage.success'),
          status: 'success',
          isClosable: true,
          position: 'top',
          duration: 3000,
        });
      })
      .catch(() => {
        toast({
          title: t('resetAllUsage.error'),
          status: 'error',
          isClosable: true,
          position: 'top',
          duration: 3000,
        });
      })
      .finally(() => {
        setLoading(false);
      });
  };
  return (
    <Modal isCentered isOpen={isResetingAllUsage} onClose={onClose} size="sm">
      <ModalOverlay bg="blackAlpha.300" backdropFilter="blur(10px)" />
      <ModalContent mx="3">
        <ModalHeader pt={6}>
          <Icon color="red">
            <ResetIcon />
          </Icon>
        </ModalHeader>
        <ModalCloseButton mt={3} />
        <ModalBody>
          <Text fontWeight="semibold" fontSize="lg">
            {t('resetAllUsage.title')}
          </Text>
          {isResetingAllUsage && (
            <Text
              mt={1}
              fontSize="sm"
              _dark={{ color: 'gray.400' }}
              color="gray.600"
            >
              {t('resetAllUsage.prompt')}
            </Text>
          )}
        </ModalBody>
        <ModalFooter display="flex">
          <Button size="sm" onClick={onClose} mr={3} w="full" variant="outline">
            {t('cancel')}
          </Button>
          <Button
            size="sm"
            w="full"
            colorScheme="red"
            onClick={onReset}
            leftIcon={loading ? <Spinner size="xs" /> : undefined}
          >
            {t('reset')}
          </Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  );
};