import type { FC } from 'react';

import { useTranslation } from 'react-i18next';

import DownloadIcon from '@material-hu/icons/material/Download';
import PictureInPictureIcon from '@material-hu/icons/material/PictureInPicture';
import PictureInPictureAltIcon from '@material-hu/icons/material/PictureInPictureAlt';
import Box from '@material-hu/mui/Box';
import Popover from '@material-hu/mui/Popover';
import useTheme from '@material-hu/mui/styles/useTheme';
import Typography from '@material-hu/mui/Typography';

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

import usePermissions from 'src/hooks/usePermissions';
import { UserPermissions } from 'src/utils/permissions';

export type MoreOptionsPopoverProps = {
  openMoreOptions: boolean;
  id?: string;
  handleCloseMoreOptions: () => void;
  anchorMoreOptions: any;
  onDownload: () => void;
  onPictureInPicture: () => void;
  isPictureInPicture: boolean;
  idContainer?: string;
  grantDownload: boolean;
  isDownloading?: boolean;
};

const MoreOptionsPopover: FC<MoreOptionsPopoverProps> = props => {
  const {
    openMoreOptions,
    id,
    handleCloseMoreOptions,
    anchorMoreOptions,
    onDownload,
    onPictureInPicture,
    isPictureInPicture,
    idContainer,
    grantDownload,
    isDownloading,
  } = props;

  const { t } = useTranslation('attachments');
  const theme = useTheme();

  const container = idContainer ? document.getElementById(idContainer) : null;

  const { hasAll: canDownloadVideo } = usePermissions([
    UserPermissions.CAN_DOWNLOAD_VIDEO,
  ]);

  const allowVideoDownload = canDownloadVideo || grantDownload;

  return (
    <Popover
      open={openMoreOptions}
      container={container}
      id={id}
      onClose={handleCloseMoreOptions}
      anchorEl={anchorMoreOptions}
      anchorOrigin={{
        vertical: 'top',
        horizontal: 'center',
      }}
      transformOrigin={{
        vertical: 'bottom',
        horizontal: 'center',
      }}
      sx={{
        '& .MuiPopover-root': {
          borderRadius: '4px',
        },
        '& .MuiPopover-paper': {
          borderRadius: '4px',
        },
      }}
    >
      <Box sx={{ pb: 1, display: 'flex', flexDirection: 'column' }}>
        {allowVideoDownload && (
          <Button
            onClick={onDownload}
            disabled={isDownloading}
            sx={{
              borderRadius: '0px',
              display: 'flex',
              alignItems: 'center',
              color: isDownloading
                ? theme.palette.new.text.neutral.disabled
                : theme.palette.new.text.neutral.default,
            }}
          >
            <DownloadIcon fontSize="small" />
            <Typography sx={{ ml: 1, fontWeight: 500, fontSize: '12px' }}>
              {t('download')}
            </Typography>
          </Button>
        )}
        <Button
          onClick={onPictureInPicture}
          sx={{
            borderRadius: '0px',
            display: 'flex',
            alignItems: 'center',
            color: theme.palette.new.text.neutral.default,
          }}
        >
          {isPictureInPicture ? (
            <PictureInPictureAltIcon fontSize="small" />
          ) : (
            <PictureInPictureIcon fontSize="small" />
          )}
          <Typography sx={{ ml: 1, fontWeight: 500, fontSize: '12px' }}>
            {t('picture_in_picture')}
          </Typography>
        </Button>
      </Box>
    </Popover>
  );
};

export default MoreOptionsPopover;
