import { FC } from 'react';

import InfoOutlinedIcon from '@material-hu/icons/material/InfoOutlined';
import Box from '@material-hu/mui/Box';
import Tooltip from '@material-hu/mui/Tooltip';
import Typography from '@material-hu/mui/Typography';

import { Attachment } from 'src/types/attachments';
import { InputType } from 'src/types/forms';
import { splitByTypes } from 'src/utils/attachments';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { AttachmentsList } from 'src/components/attachment';

export type InputWrapperProps = {
  attachments: Attachment[] | null;
  errors?: any;
  name?: string;
  inputType?: string;
  infoMessage?: string;
};

export const InputWrapper: FC<
  React.PropsWithChildren<InputWrapperProps>
> = props => {
  const { attachments, children, errors, name, inputType, infoMessage } = props;

  const { t } = useLokaliseTranslation('forms');

  return (
    <>
      {!!attachments?.length && (
        <Box sx={{ mb: 4 }}>
          <AttachmentsList
            {...splitByTypes(attachments)}
            mediaListType="carousel"
            enableOpenFile
          />
        </Box>
      )}
      {children}
      {errors && name && errors[name] && (
        <Box sx={{ display: 'flex', alignItems: 'center' }}>
          <Typography
            color="error.main"
            sx={{ fontSize: '12px' }}
          >
            {errors[name].message || t('MANDATORY_FIELD')}
          </Typography>
          {infoMessage &&
            inputType === InputType.DECIMAL &&
            errors[name].type !== 'required' && (
              <Tooltip
                title={
                  <span style={{ whiteSpace: 'pre-line' }}>{infoMessage}</span>
                }
                placement="top"
              >
                <InfoOutlinedIcon sx={{ ml: 1, fontSize: '20px' }} />
              </Tooltip>
            )}
        </Box>
      )}
    </>
  );
};

export default InputWrapper;