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