import { useState } from 'react';
import { useMutation, gql } from '@apollo/client';
import {
  RenameCollectionMutation,
  RenameCollectionMutationVariables,
} from 'types/graphql';

import { RenameModal } from 'components/modals/RenameModal';

const RENAME_COLLECTION = gql`
  mutation RENAME_COLLECTION($collectionId: ID!, $name: String!) {
    collection: updateCollectionName(
      collectionId: $collectionId
      newName: $name
    ) {
      id
      name
    }
  }
`;

interface RenameCollectionModalProps {
  collectionId: string;
  value: string;
  onDismiss?: () => void;
}

export const RenameCollectionModal = ({
  collectionId,
  value,
  onDismiss,
}: RenameCollectionModalProps) => {
  const [name, setName] = useState(value);
  const [renameDataset] = useMutation<
    RenameCollectionMutation,
    RenameCollectionMutationVariables
  >(RENAME_COLLECTION);

  const submit: React.FormEventHandler<HTMLFormElement> = (ev) => {
    ev.preventDefault();
    if (name) {
      renameDataset({ variables: { collectionId, name } })
        .then(onDismiss)
        .catch(console.error); //TODO Handle error
    }
  };

  return (
    <RenameModal
      value={name}
      onChange={(ev) => setName(ev.target.value)}
      onSubmit={submit}
      onDismiss={onDismiss}
    />
  );
};