import { type FC } from 'react';
import { type UseControllerProps } from 'react-hook-form';

import { type IAllProps } from '@humanddev/material-hu/tinymce';
import i18next from 'i18next';
import isNil from 'lodash-es/isNil';
import Typography from '@material-hu/mui/Typography';

import FormRichEditorHu from '@material-hu/components/deprecated/FormRichEditor';

type FormRichEditorProps = UseControllerProps & {
  editorProps?: IAllProps;
  handleBlur?: Function;
  hideModalButtons?: boolean; // some toolbar buttons don't work when tinymce is rendered on a modal
  simplifyEditor?: boolean;
  disabled?: boolean;
  required?: boolean;
  placeholder?: string;
  label?: string;
  toolbar?: string;
};

const FormRichEditor: FC<FormRichEditorProps> = props => {
  const {
    editorProps,
    handleBlur,
    hideModalButtons,
    simplifyEditor = true,
    placeholder,
    disabled = false,
    label,
    required,
    toolbar,
    ...other
  } = props;

  return (
    <>
      {label && (
        <Typography
          sx={{ mb: '18px' }}
          variant="body1"
        >
          {label}
          {required && (
            <Typography
              component="span"
              color="error"
            >
              {' *'}
            </Typography>
          )}
        </Typography>
      )}
      <FormRichEditorHu
        editorProps={{
          ...editorProps,
          init: {
            language_url: '/tinymce/langs/' + i18next.language + '.js',
          },
          plugins: 'autolink link lists',
          ...(!isNil(toolbar) && { toolbar }),
        }}
        handleBlur={handleBlur}
        hideModalButtons={hideModalButtons}
        simplifyEditor={simplifyEditor}
        placeholder={placeholder}
        disabled={disabled}
        fontsURL={import.meta.env.VITE_FONTS_URL}
        imagesUploadHandler={() => {}}
        addVideoEditorPlugin={() => {}}
        rules={{ required }}
        {...other}
      />
    </>
  );
};
export default FormRichEditor;
