import { useEffect } from 'react';
import { FormProvider, useForm } from 'react-hook-form';

import Stack from '@material-hu/mui/Stack';

import Dialog from '@material-hu/components/design-system/Dialog';
import InputClassic from '@material-hu/components/design-system/Inputs/Classic/form';

import { useLokaliseTranslation } from 'src/utils/i18n';

import { KNOWLEDGE_BASE_NAME_MAX_LENGTH } from '../../constants';
import { useUpdateKnowledgeBaseItem } from '../../hooks/useUpdateKnowledgeBaseItem';
import { type KnowledgeBaseItem, KnowledgeBaseItemType } from '../../types';

type EditNameDialogProps = {
  item: KnowledgeBaseItem;
  onClose: () => void;
};

type FormValues = {
  name: string;
};

const EditNameDialog = ({ item, onClose }: EditNameDialogProps) => {
  const { t } = useLokaliseTranslation('agents');
  const { updateFile, updateFolder } = useUpdateKnowledgeBaseItem();

  const isFolder = item.type === KnowledgeBaseItemType.FOLDER;
  const isLoading = isFolder ? updateFolder.isLoading : updateFile.isLoading;

  const originalName = isFolder
    ? item.name
    : item.name.replace(`.${item.extension}`, '');

  const form = useForm<FormValues>({
    defaultValues: { name: originalName },
  });

  const name = form.watch('name');
  const isSameAsOriginal = name.trim() === originalName.trim();

  useEffect(() => {
    form.setFocus('name');
  }, [form.setFocus]);

  const handleConfirm = form.handleSubmit(({ name: rawName }) => {
    const newName = rawName.trim();

    if (isFolder) {
      updateFolder.mutate(
        { path: item.path, payload: { newName }, type: 'rename' },
        { onSuccess: onClose },
      );
    } else {
      updateFile.mutate(
        {
          filename: item.path,
          payload: { newName: `${newName}.${item.extension}` },
          type: 'rename',
        },
        { onSuccess: onClose },
      );
    }
  });

  return (
    <FormProvider {...form}>
      <form onSubmit={handleConfirm}>
        <Dialog
          onClose={onClose}
          title={t('knowledge_base.edit_name_dialog.title')}
          primaryButtonProps={{
            children: t('general:save_changes'),
            disabled: !name.trim() || isSameAsOriginal,
            loading: isLoading,
            type: 'submit',
          }}
          secondaryButtonProps={{
            children: t('general:cancel'),
            onClick: onClose,
          }}
          body={
            <Stack sx={{ minWidth: 492 }}>
              <InputClassic
                name="name"
                inputProps={{
                  label: t(
                    isFolder
                      ? 'knowledge_base.edit_name_dialog.folder_field_label'
                      : 'knowledge_base.edit_name_dialog.file_field_label',
                  ),
                  maxLength: KNOWLEDGE_BASE_NAME_MAX_LENGTH,
                  hasCounter: true,
                  autoFocus: true,
                  helperText: isFolder ? undefined : `.${item.extension}`,
                }}
              />
            </Stack>
          }
        />
      </form>
    </FormProvider>
  );
};

export default EditNameDialog;