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 { ArrowPathIcon } from '@heroicons/react/24/outline';
 16import { useUsers } from 'stores';
 17import { FC, useState } from 'react';
 18import { Trans, useTranslation } from 'react-i18next';
 19import { Icon } from 'components/icon';
 20
 21const ResetIcon = chakra(ArrowPathIcon, {
 22  baseStyle: {
 23    w: 5,
 24    h: 5,
 25  },
 26});
 27
 28export type RevokeSubscriptionModalProps = {};
 29
 30export const RevokeSubscriptionModal: FC<RevokeSubscriptionModalProps> = () => {
 31  const [loading, setLoading] = useState(false);
 32  const { revokeSubscriptionUser: user, revokeSubscription } = useUsers();
 33  const { t } = useTranslation();
 34  const toast = useToast();
 35  const onClose = () => {
 36    useUsers.setState({ revokeSubscriptionUser: null });
 37  };
 38  const onReset = () => {
 39    if (user) {
 40      setLoading(true);
 41      revokeSubscription(user)
 42        .then(() => {
 43          toast({
 44            title: t('revokeUserSub.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('revokeUserSub.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('revokeUserSub.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 components={{ b: <b /> }}>
 87                {t('revokeUserSub.prompt', { username: user.username })}
 88              </Trans>
 89            </Text>
 90          )}
 91        </ModalBody>
 92        <ModalFooter display="flex">
 93          <Button size="sm" onClick={onClose} mr={3} w="full" variant="outline">
 94            {t('cancel')}
 95          </Button>
 96          <Button
 97            size="sm"
 98            w="full"
 99            colorScheme="blue"
100            onClick={onReset}
101            leftIcon={loading ? <Spinner size="xs" /> : undefined}
102          >
103            {t('revoke')}
104          </Button>
105        </ModalFooter>
106      </ModalContent>
107    </Modal>
108  );
109};