1import {
  2  Button,
  3  chakra,
  4  Modal,
  5  ModalBody,
  6  ModalCloseButton,
  7  ModalContent,
  8  ModalFooter,
  9  ModalHeader,
 10  ModalOverlay,
 11  Spinner,
 12  Text,
 13  useToast,
 14} from '@chakra-ui/react';
 15import { FC, useState } from 'react';
 16import { DocumentMinusIcon } from '@heroicons/react/24/outline';
 17import { Icon } from 'components/icon';
 18import { useTranslation } from 'react-i18next';
 19import { useUsers } from 'stores';
 20
 21export const ResetIcon = chakra(DocumentMinusIcon, {
 22  baseStyle: {
 23    w: 5,
 24    h: 5,
 25  },
 26});
 27
 28type DeleteUserModalProps = {};
 29
 30export const ResetAllUsageModal: FC<DeleteUserModalProps> = () => {
 31  const [loading, setLoading] = useState(false);
 32  const { isResetingAllUsage, onResetAllUsage, resetAllUsage } = useUsers();
 33  const { t } = useTranslation();
 34  const toast = useToast();
 35  const onClose = () => {
 36    onResetAllUsage(false);
 37  };
 38  const onReset = () => {
 39    setLoading(true);
 40    resetAllUsage()
 41      .then(() => {
 42        toast({
 43          title: t('resetAllUsage.success'),
 44          status: 'success',
 45          isClosable: true,
 46          position: 'top',
 47          duration: 3000,
 48        });
 49      })
 50      .catch(() => {
 51        toast({
 52          title: t('resetAllUsage.error'),
 53          status: 'error',
 54          isClosable: true,
 55          position: 'top',
 56          duration: 3000,
 57        });
 58      })
 59      .finally(() => {
 60        setLoading(false);
 61      });
 62  };
 63  return (
 64    <Modal isCentered isOpen={isResetingAllUsage} onClose={onClose} size="sm">
 65      <ModalOverlay bg="blackAlpha.300" backdropFilter="blur(10px)" />
 66      <ModalContent mx="3">
 67        <ModalHeader pt={6}>
 68          <Icon color="red">
 69            <ResetIcon />
 70          </Icon>
 71        </ModalHeader>
 72        <ModalCloseButton mt={3} />
 73        <ModalBody>
 74          <Text fontWeight="semibold" fontSize="lg">
 75            {t('resetAllUsage.title')}
 76          </Text>
 77          {isResetingAllUsage && (
 78            <Text
 79              mt={1}
 80              fontSize="sm"
 81              _dark={{ color: 'gray.400' }}
 82              color="gray.600"
 83            >
 84              {t('resetAllUsage.prompt')}
 85            </Text>
 86          )}
 87        </ModalBody>
 88        <ModalFooter display="flex">
 89          <Button size="sm" onClick={onClose} mr={3} w="full" variant="outline">
 90            {t('cancel')}
 91          </Button>
 92          <Button
 93            size="sm"
 94            w="full"
 95            colorScheme="red"
 96            onClick={onReset}
 97            leftIcon={loading ? <Spinner size="xs" /> : undefined}
 98          >
 99            {t('reset')}
100          </Button>
101        </ModalFooter>
102      </ModalContent>
103    </Modal>
104  );
105};