import { useMutation } from '@apollo/client';
import { KLAVIYO_UPDATE, KLAVIYO_STATUS } from '../schema';
import {
  KlaviyoUpdateMutation,
  KlaviyoUpdateMutationVariables,
} from 'types/graphql';
import { call } from 'utils/call';

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

export const DisconncetKlaviyoModal = ({
  onDismiss,
}: {
  onDismiss?: () => void;
}) => {
  const [submit, { loading }] = useMutation<
    KlaviyoUpdateMutation,
    KlaviyoUpdateMutationVariables
  >(KLAVIYO_UPDATE, {
    refetchQueries: [{ query: KLAVIYO_STATUS }],
    awaitRefetchQueries: true,
  });

  const handleSubmit: React.MouseEventHandler<HTMLButtonElement> = async (
    ev
  ) => {
    try {
      await submit({
        variables: {
          status: 'disconnected',
        },
      });
      call(onDismiss);
    } catch (error) {
      console.log(error);
    }
  };
  return (
    <ModalContainer title="Disconnect Klaviyo?">
      <Box spacingY={4}>
        <Box spacingY={2}>
          <Text size="s">
            Disconnecting Klaviyo disables exporting any audiences from
            FanSifter to your Klaviyo account, and importing new lists from
            Klaviyo to FanSifter.
          </Text>
          <Text size="s">
            Already imported lists stay intact in your Workspaces, and exported
            audiences stay intact on your Klaviyo account.
          </Text>
        </Box>
        <Box display="flex" spacing={2}>
          <Button onClick={onDismiss} color="gray" block>
            Cancel
          </Button>
          <Button onClick={handleSubmit} color="red" block disabled={loading}>
            Disconnect
          </Button>
        </Box>
      </Box>
    </ModalContainer>
  );
};