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

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

import NewModal from '@material-hu/components/deprecated/NewModal';

import { Attachment } from 'src/types/attachments';
import { useLokaliseTranslation } from 'src/utils/i18n';
import {
  getFileNameExtension,
  getFileNameWithExtension,
  getFileNameWithoutExtension,
} from 'src/utils/stringUtils';

import FormTextField from 'src/components/FormInputs/FormTextField';

import { MAX_LENGTH_NAME } from './constants';

export type EditNameModalProps = {
  attachment: Attachment;
  onClose: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
  onConfirm: (name: string) => void;
};

export const EditNameModal: FC<EditNameModalProps> = props => {
  const { onClose, onConfirm, attachment } = props;

  const { t } = useLokaliseTranslation(['backoffice_only']);

  const form = useForm({
    defaultValues: {
      name: getFileNameWithoutExtension(attachment.name || ''),
    },
    mode: 'onChange',
  });

  const { handleSubmit, watch, setFocus, formState } = form;

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

  const newName = watch('name');
  const extension = getFileNameExtension(attachment.name || '');

  const submit = () => {
    onConfirm(getFileNameWithExtension(newName, extension || ''));
  };

  return (
    <FormProvider {...form}>
      <form
        noValidate
        onSubmit={handleSubmit(submit)}
      >
        <NewModal
          onClose={onClose}
          title={t('backoffice_only:form_drop_attachments.edit_name_title')}
          body={
            <FormTextField
              margin="dense"
              name="name"
              label={t('backoffice_only:form_drop_attachments.name')}
              required
              maxLength={MAX_LENGTH_NAME}
              InputProps={{
                endAdornment: (
                  <InputAdornment position="end">.{extension}</InputAdornment>
                ),
              }}
            />
          }
          secondaryButtonProps={{
            onClick: onClose,
            children: t('general:cancel'),
          }}
          primaryButtonProps={{
            disabled: !formState.isValid,
            children: t('backoffice_only:form_drop_attachments.rename'),
            type: 'submit',
          }}
        />
      </form>
    </FormProvider>
  );
};

export default EditNameModal;