import { useMutation } from '@apollo/client';
import { FACEBOOK_SETTINGS } from '../schema/queries';
import { UPDATE_FACEBOOK_STATUS } from '../schema/mutations';
import {
  UpdateFacebookStatusMutation,
  UpdateFacebookStatusMutationVariables,
} from 'types/graphql';
import { call } from 'utils/call';

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

export const DisconnectFacebookModal = ({
  onDismiss,
}: {
  onDismiss?: () => void;
}) => {
  const [submit, mutation] = useMutation<
    UpdateFacebookStatusMutation,
    UpdateFacebookStatusMutationVariables
  >(UPDATE_FACEBOOK_STATUS, {
    refetchQueries: [{ query: FACEBOOK_SETTINGS }],
    awaitRefetchQueries: true,
  });

  const handleConfirm: React.MouseEventHandler<HTMLButtonElement> = async (
    ev
  ) => {
    try {
      await submit({ variables: { status: 'disconnected' } });
      call(onDismiss);
    } catch (error) {
      console.log(error);
    }
  };

  const handleDismiss: React.MouseEventHandler<HTMLButtonElement> = (ev) => {
    call(onDismiss);
  };

  return (
    <ModalContainer title="Disconnect Facebook Account">
      <Text size="s">
        Disconnecting Facebook will unshare all your audiences, stop all your
        running ad campaigns from these audiences, and remove all ad accounts
        from FanSifter.
      </Text>
      <Box display="flex" marginY={4} spacing={2}>
        <Button
          onClick={handleDismiss}
          color="gray"
          block
          disabled={!onDismiss}
        >
          Cancel
        </Button>
        <Button
          onClick={handleConfirm}
          color="red"
          block
          disabled={mutation.loading}
        >
          Disconnect
        </Button>
      </Box>
      {mutation.error && (
        <Text size="s" className="c-red">
          {mutation.error.message}
        </Text>
      )}
    </ModalContainer>
  );
};