import {useForm} from 'react-hook-form';
import {FormTextField} from '../ui/forms/input-field/text-field/text-field';
import {Form} from '../ui/forms/form';
import {Button} from '../ui/buttons/button';
import {DialogFooter} from '../ui/overlays/dialog/dialog-footer';
import {useDialogContext} from '../ui/overlays/dialog/dialog-context';
import {Dialog} from '../ui/overlays/dialog/dialog';
import {DialogHeader} from '../ui/overlays/dialog/dialog-header';
import {DialogBody} from '../ui/overlays/dialog/dialog-body';
import {
  UpdateWorkspacePayload,
  useUpdateWorkspace,
} from './requests/update-workspace';
import {Workspace} from './types/workspace';
import {Trans} from '../i18n/trans';

interface Props {
  workspace: Workspace;
}
export function RenameWorkspaceDialog({workspace}: Props) {
  const form = useForm<UpdateWorkspacePayload>({
    defaultValues: {id: workspace.id, name: workspace.name},
  });
  const {formId, close} = useDialogContext();
  const updateWorkspace = useUpdateWorkspace(form);

  return (
    <Dialog>
      <DialogHeader>
        <Trans message="Rename workspace" />
      </DialogHeader>
      <DialogBody>
        <Form
          form={form}
          id={formId}
          onSubmit={() => {
            updateWorkspace.mutate(form.getValues());
          }}
        >
          <FormTextField
            name="name"
            autoFocus
            label={<Trans message="Name" />}
            minLength={3}
            required
          />
        </Form>
      </DialogBody>
      <DialogFooter>
        <Button variant="text" onClick={close}>
          <Trans message="Cancel" />
        </Button>
        <Button
          variant="flat"
          color="primary"
          type="submit"
          form={formId}
          disabled={updateWorkspace.isPending}
        >
          <Trans message="Rename" />
        </Button>
      </DialogFooter>
    </Dialog>
  );
}