import { useMutation, useQuery } from '@apollo/client';
import { TRY_DELETE_ALLIANCE_COLLECTION } from '../schema/queries';
import { REMOVE_COLLECTIONS } from '../schema/mutations';
import {
  RemoveCollectionsMutation,
  RemoveCollectionsMutationVariables,
  TryDeleteAllianceCollectionQuery,
  TryDeleteAllianceCollectionQueryVariables,
} from 'types/graphql';

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

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

export const DeleteCollectionModal = ({
  allianceId,
  collectionId,
  onComplete,
  onDismiss,
}: DeleteCollectionModalProps) => {
  const { data, ...query } = useQuery<
    TryDeleteAllianceCollectionQuery,
    TryDeleteAllianceCollectionQueryVariables
  >(TRY_DELETE_ALLIANCE_COLLECTION, {
    variables: { allianceId, collectionIds: [collectionId] },
  });

  const [removeCollections, mutation] = useMutation<
    RemoveCollectionsMutation,
    RemoveCollectionsMutationVariables
  >(REMOVE_COLLECTIONS);

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

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

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