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

import DialogActions from '@material-hu/mui/DialogActions';
import DialogContent from '@material-hu/mui/DialogContent';
import DialogTitle from '@material-hu/mui/DialogTitle';
import InputAdornment from '@material-hu/mui/InputAdornment';

import Button from '@material-hu/components/design-system/Buttons/Button';

import { useLokaliseTranslation } from 'src/utils/i18n';
import {
  getFileNameExtension,
  getFileNameWithoutExtension,
} from 'src/utils/stringUtils';
import { validateRequiredStringRule } from 'src/utils/validation';

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

type Props = {
  index: number;
  filename: string;
  handleEditName: Function;
  onClose: () => void;
};

const EditFileName = ({ index, filename, handleEditName, onClose }: Props) => {
  const { t } = useLokaliseTranslation('backoffice_only');

  const form = useForm({
    defaultValues: {
      newFilename: getFileNameWithoutExtension(filename),
    },
    mode: 'onChange',
  });
  const { newFilename } = form.watch();

  return (
    <FormProvider {...form}>
      <DialogTitle>{t('backoffice_only:files_list.edit')}</DialogTitle>
      <DialogContent>
        <FormTextField
          margin="dense"
          name="newFilename"
          defaultValue={getFileNameWithoutExtension(newFilename)}
          label={t('backoffice_only:files_list.name')}
          InputProps={{
            endAdornment: (
              <InputAdornment position="end">
                .{getFileNameExtension(filename)}
              </InputAdornment>
            ),
            inputProps: { maxLength: 255 },
          }}
          required
          rules={{ validate: validateRequiredStringRule }}
        />
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose}>
          {t('backoffice_only:files_list.cancel')}
        </Button>
        <Button
          variant="contained"
          disabled={newFilename === ''}
          onClick={() => {
            handleEditName(
              index,
              `${newFilename}.${getFileNameExtension(filename)}`,
            );
            onClose();
          }}
        >
          {t('backoffice_only:files_list.rename')}
        </Button>
      </DialogActions>
    </FormProvider>
  );
};
export default EditFileName;