import { useMutation, useQuery, gql } from '@apollo/client';
import {
  DeleteCollectionMutation,
  DeleteCollectionMutationVariables,
  TryDeleteCollectionQuery,
  TryDeleteCollectionQueryVariables,
} from 'types/graphql';

import { DeleteConfirmationModal } from 'components/modals/confirmation';
import { call } from 'utils/call';

import { fragments } from 'components/modals/confirmation/fragments';

const TRY_DELETE_COLLECTION = gql`
  query TRY_DELETE_COLLECTION($collectionId: ID!) {
    confirm: tryDeleteCollection(collectionId: $collectionId) {
      ...confirmation
    }
  }
  ${fragments.confirmation}
`;

const DELETE_COLLECTION = gql`
  mutation DELETE_COLLECTION($collectionId: ID!, $confirmedIds: [ID]) {
    collection: deleteCollection(
      collectionId: $collectionId
      acceptedConsequences: $confirmedIds
    ) {
      id
    }
  }
`;

interface DeleteCollectionModalProps {
  collectionId: string;
  onComplete?: () => void;
  onDismiss?: () => void;
}

export const DeleteCollectionModal = ({
  collectionId,
  onComplete,
  onDismiss,
}: DeleteCollectionModalProps) => {
  const { data, ...query } = useQuery<
    TryDeleteCollectionQuery,
    TryDeleteCollectionQueryVariables
  >(TRY_DELETE_COLLECTION, {
    variables: { collectionId },
  });

  const [deleteCollection, mutation] = useMutation<
    DeleteCollectionMutation,
    DeleteCollectionMutationVariables
  >(DELETE_COLLECTION, {
    errorPolicy: 'none',
  });

  const handleDelete = async (confirmedIds: string[]) => {
    try {
      await deleteCollection({
        variables: { collectionId, confirmedIds },
      });
      call(onComplete);
      call(onDismiss);
    } catch (error) {
      console.error(error);
    }
  };

  const error = query.error || mutation.error;

  return (
    <DeleteConfirmationModal
      title="Delete dataset?"
      message="Once you delete the collection - it can´t be restored"
      confirm={data?.confirm}
      loading={query.loading}
      submitting={mutation.loading}
      onSubmit={handleDelete}
      onDismiss={onDismiss}
      submitButton={mutation.loading ? 'Deleting...' : 'Delete'}
      error={error}
    />
  );
};