import { type FC, Fragment, useRef } from 'react';

import {
  IconFile,
  IconPhoto,
  IconPlus,
  IconX,
} from '@material-hu/icons/tabler';
import Box from '@material-hu/mui/Box';
import IconButton from '@material-hu/mui/IconButton';
import Input from '@material-hu/mui/Input';
import Menu from '@material-hu/mui/Menu';
import MenuItem from '@material-hu/mui/MenuItem';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import useFeatureFlag from 'src/hooks/useFeatureFlag';
import { FeatureFlags } from 'src/types/featureFlags';
import { useLokaliseTranslation } from 'src/utils/i18n';

type SendMediaMenuProps = {
  open: boolean;
  anchorEl: HTMLElement | null;
  onOpen: (param: any) => void;
  onClose: (param: any) => void;
  onChangeImagesVideos: (event: any) => Promise<void>;
  onChangeFiles: (event: any) => Promise<void>;
  disabled?: boolean;
};

const IMAGES_AND_VIDEOS =
  'image/png, image/jpg, image/jpeg, video/mp4, video/webm, video/ogg, video/quicktime';

const SendMediaMenu: FC<SendMediaMenuProps> = props => {
  const {
    open,
    anchorEl,
    onOpen,
    onClose,
    onChangeImagesVideos,
    onChangeFiles,
    disabled,
  } = props;

  const fileInputImageRef = useRef<HTMLInputElement | null>(null);
  const fileInputFileRef = useRef<HTMLInputElement | null>(null);
  const { t } = useLokaliseTranslation('chat');
  const theme = useTheme();
  const blockSendFiles = useFeatureFlag(FeatureFlags.BLOCK_FILES_CHATS_V2);

  const handleAttachImages = () => {
    fileInputImageRef.current?.click();
  };

  const handleAttachFiles = () => {
    fileInputFileRef.current?.click();
  };

  const menuOptions = [
    {
      id: 'add-files',
      enabled: !blockSendFiles,
      option: (
        <MenuItem onClick={handleAttachFiles}>
          <Stack sx={{ flexDirection: 'row', gap: 1, alignItems: 'center' }}>
            <Stack
              sx={{
                backgroundColor: theme.palette.new.background.layout.brand,
                borderRadius: '50%',
                height: 40,
                width: 40,
                justifyContent: 'center',
                alignItems: 'center',
              }}
            >
              <IconFile color={theme.palette.new.text.neutral.brand} />
            </Stack>
            <Typography
              variant="globalS"
              fontWeight="fontWeightSemiBold"
            >
              {t('files.documents')}
            </Typography>
            <Input
              type="file"
              inputProps={{
                accept: '*',
                multiple: true,
              }}
              sx={{
                display: 'none',
              }}
              inputRef={fileInputFileRef}
              onChange={onChangeFiles}
            />
          </Stack>
        </MenuItem>
      ),
    },

    {
      id: 'add-images',
      enabled: true,
      option: (
        <MenuItem onClick={handleAttachImages}>
          <Stack sx={{ flexDirection: 'row', gap: 1, alignItems: 'center' }}>
            <Stack
              sx={{
                backgroundColor: theme.palette.new.background.layout.brand,
                borderRadius: '50%',
                height: 40,
                width: 40,
                justifyContent: 'center',
                alignItems: 'center',
              }}
            >
              <IconPhoto color={theme.palette.new.text.neutral.brand} />
            </Stack>
            <Typography
              variant="globalS"
              fontWeight="fontWeightSemiBold"
            >
              {t('files.photos_and_videos')}
            </Typography>
            <Input
              type="file"
              inputProps={{
                accept: IMAGES_AND_VIDEOS,
                multiple: true,
              }}
              sx={{
                display: 'none',
              }}
              inputRef={fileInputImageRef}
              onChange={onChangeImagesVideos}
            />
          </Stack>
        </MenuItem>
      ),
    },
  ];

  const filteredOptions = menuOptions.filter(option => option.enabled);

  return (
    <>
      <IconButton
        id="admin-menu-button"
        aria-controls="admin-menu"
        sx={{
          width: 40,
          height: 40,
        }}
        aria-haspopup="true"
        onClick={onOpen}
        disabled={disabled}
      >
        {!open ? (
          <IconPlus
            size={24}
            color={theme.palette.new.text.neutral.default}
          />
        ) : (
          <IconX
            size={24}
            color={theme.palette.new.text.neutral.default}
          />
        )}
      </IconButton>
      <Menu
        id="admin-menu"
        elevation={2}
        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
        style={{ marginTop: '-50px' }}
        MenuListProps={{
          'aria-labelledby': 'admin-menu-button',
        }}
        anchorEl={anchorEl}
        open={open}
        onClose={onClose}
      >
        <Box sx={{ width: 'fit-content' }}>
          {filteredOptions.map(({ id, option }) => (
            <Fragment key={id}> {option} </Fragment>
          ))}
        </Box>
      </Menu>
    </>
  );
};

export default SendMediaMenu;