import { useMutation } from '@apollo/client';
import { DELETE_AD_ACCOUNT } from '../schema/mutations';
import {
  DeleteAdAccountMutation,
  DeleteAdAccountMutationVariables,
} from 'types/graphql';
import { call } from 'utils/call';

import { useDelay } from 'hooks/useDelay';

import { Box, Button, Text, Spinner } from 'components/common';
import { ModalContainer } from 'components/modals';

interface DeleteAdAccountModalProps {
  id: string;
  name: string;
  onAccept?: () => void;
  onDismiss?: () => void;
}

export const DeleteAdAccountModal = ({
  id,
  name,
  onAccept,
  onDismiss,
}: DeleteAdAccountModalProps) => {
  const [mutate, mutation] = useMutation<
    DeleteAdAccountMutation,
    DeleteAdAccountMutationVariables
  >(DELETE_AD_ACCOUNT);

  const handleSubmit: React.FormEventHandler<HTMLFormElement> = async (ev) => {
    ev.preventDefault();
    call(onAccept);

    try {
      await mutate({ variables: { id } });
      call(onDismiss);
    } catch (error) {
      console.error(error);
    }
  };

  const [remainder] = useDelay(15000);

  return (
    <ModalContainer title="Disconnect Account">
      <form onSubmit={handleSubmit}>
        <Box position="relative" spacingY={2}>
          <Text size="s">
            If you will disconnect <b>{name}</b> all related data will get lost
          </Text>
          <Spinner show={mutation.loading} />
        </Box>
        <Box display="flex" marginY={4} spacing={2}>
          <Button block onClick={onDismiss} color="gray">
            Cancel
          </Button>
          <Button
            block
            type="submit"
            // onClick={handleSubmit}
            color="red"
            disabled={remainder > 0 || mutation.loading}
          >
            {remainder > 0 ? `Wait (${remainder / 1000})` : 'Disconnect'}
          </Button>
        </Box>
      </form>
    </ModalContainer>
  );
};