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

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

export const RENAME_WORKSPACE = gql`
  mutation RENAME_WORKSPACE(
    $workspaceId: ID!
    $name: String
    $description: String
  ) {
    workspace: updateWorkspace(
      workspaceId: $workspaceId
      name: $name
      description: $description
    ) {
      id
      name
    }
  }
`;

interface RenameWorkspaceModalProps {
  workspaceId: string;
  value?: string;
  onDismiss?: () => void;
}

export const RenameWorkspaceModal = ({
  workspaceId,
  value = '',
  onDismiss,
}: RenameWorkspaceModalProps) => {
  const [name, setName] = useState(value);
  const [renameWorkspace] = useMutation<
    RenameWorkspaceMutation,
    RenameWorkspaceMutationVariables
  >(RENAME_WORKSPACE);

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

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