import { ReactNode } from 'react';
import { useTranslation } from 'react-i18next';

import VideocamIcon from '@material-hu/icons/material/Videocam';
import {
  IconCamera,
  IconFileUpload,
  IconPhoto,
} from '@material-hu/icons/tabler';
import { useTheme } from '@material-hu/mui/styles';

import { TooltipProps as HuTooltipProps } from '@material-hu/components/design-system/Tooltip/types';

import { MAX_ATTACHED } from 'src/constants/attachments';
import { FileTypes } from 'src/types/attachments';

import FormFile from 'src/components/FormInputs/FormFile';
import FormGif from 'src/components/FormInputs/FormGif';

export type AttachmentsAddProps = Pick<HuTooltipProps, 'direction'> & {
  // TODO fix FormFIle props
  onAddImage?: (image: any) => void;
  onAddFile?: (file: any) => void;
  onAddVideo?: (video: any) => void;
  onAddGif?: (gif: any) => void;
  onAddMultimedia?: (multimedia: any) => void;
  onAddMultipleFiles?: (files: any) => void;
  disabled?: boolean;
  gifDisabled?: boolean;
  fileDisabled?: boolean;
  multimediaDisabled?: boolean;
  size?: any;
  iconCustomFile?: ReactNode;
  iconCustomPhoto?: ReactNode;
  iconCustomVideo?: ReactNode;
  iconColor?: string;
  multimediaSize?: number;
  filesSize?: number;
  maxMultimedia?: number;
  maxFiles?: number;
  checkMax?: boolean;
  onlyIcon?: boolean;
};

const AttachmentsAdd = ({
  onAddImage,
  onAddFile,
  onAddVideo,
  onAddGif,
  onAddMultimedia,
  onAddMultipleFiles,
  disabled = false,
  gifDisabled = false,
  fileDisabled = false,
  multimediaDisabled = false,
  size = 'large',
  direction = 'bottom',
  iconCustomPhoto,
  iconCustomVideo,
  iconCustomFile,
  multimediaSize = 0,
  filesSize = 0,
  maxMultimedia = MAX_ATTACHED.MULTIMEDIA,
  maxFiles = MAX_ATTACHED.FILES,
  checkMax = false,
  onlyIcon = false,
  iconColor,
}: AttachmentsAddProps) => {
  const { t } = useTranslation(['attachments', 'post']);
  const theme = useTheme();

  const color = iconColor ?? theme.palette.new.text.neutral.default ?? '';

  return (
    <>
      {onAddImage && (
        <FormFile
          name="images"
          inputProps={{ accept: 'image/*' }}
          title={t('post:attach_image')}
          type={FileTypes.IMAGE}
          disabled={disabled}
          size={size}
          onlyIcon={onlyIcon}
          icon={iconCustomPhoto || <IconPhoto color={color} />}
          onChange={onAddImage}
          onClick={event => {
            (event.target as HTMLTextAreaElement).value = '';
          }}
          direction={direction}
        />
      )}
      {onAddVideo && (
        <FormFile
          name="videos"
          inputProps={{ accept: 'video/*' }}
          title={t('post:attach_video')}
          onlyIcon={onlyIcon}
          type={FileTypes.VIDEO}
          icon={iconCustomVideo || <VideocamIcon sx={{ color: color }} />}
          disabled={disabled}
          onChange={onAddVideo}
          onClick={event => {
            (event.target as HTMLTextAreaElement).value = '';
          }}
          direction={direction}
        />
      )}
      {onAddMultimedia && (
        <FormFile
          name="multimedia"
          inputProps={{
            multiple: true,
            accept: 'video/*, image/*, audio/*',
          }}
          title={t('attach_image_file')}
          onlyIcon={onlyIcon}
          disabled={disabled || multimediaDisabled}
          type={FileTypes.VIDEO || FileTypes.IMAGE}
          icon={
            iconCustomVideo || (
              <IconCamera
                color={color}
                fontSize="medium"
              />
            )
          }
          onChange={onAddMultimedia}
          onClick={event => {
            (event.target as HTMLTextAreaElement).value = '';
          }}
          direction={direction}
          multimediaSize={multimediaSize}
          maxMultimedia={maxMultimedia}
          multiple
          checkMax={checkMax}
        />
      )}
      {onAddGif && (
        <FormGif
          disabled={disabled || gifDisabled}
          onGifSelection={onAddGif}
          title={t('attach_gif')}
          direction={direction}
          iconColor={color}
          onlyIcon={onlyIcon}
          disableTooltip={disabled || gifDisabled}
        />
      )}
      {(onAddFile || onAddMultipleFiles) && (
        <FormFile
          name="files"
          inputProps={{
            accept: '*',
            multiple: !!onAddMultipleFiles,
          }}
          onlyIcon={onlyIcon}
          disabled={disabled || fileDisabled}
          title={t('post:attach_file')}
          type={FileTypes.FILE}
          icon={iconCustomFile || <IconFileUpload color={color} />}
          onChange={onAddMultipleFiles || onAddFile}
          onClick={event => {
            (event.target as HTMLTextAreaElement).value = '';
          }}
          direction={direction}
          multiple={!!onAddMultipleFiles}
          isFileMultiple={!!onAddMultipleFiles}
          filesSize={filesSize}
          maxFiles={maxFiles}
          checkMax={checkMax}
        />
      )}
    </>
  );
};

export default AttachmentsAdd;