import { FC } from 'react';

import Checkbox from '@material-hu/mui/Checkbox';
import Menu from '@material-hu/mui/Menu';
import MenuItem from '@material-hu/mui/MenuItem';
import Typography from '@material-hu/mui/Typography';

import { useAuth } from 'src/contexts/JWTContext';
import { isVisible } from 'src/utils/instance';

import { useTranslation } from '../i18n';

export type CardContentMenuProps = {
  cardContentMenuAnchorEl: any;
  handleCardContentMenuClose: () => void;
  handleChartEmailValue: any;
  handleChartDepartmentValue: any;
  handleChartPositionValue: any;
  handleChartTimeValue: any;
  cardContentValue: string[];
};

const CardContentMenu: FC<CardContentMenuProps> = props => {
  const {
    cardContentMenuAnchorEl,
    handleCardContentMenuClose,
    handleChartEmailValue,
    handleChartDepartmentValue,
    handleChartPositionValue,
    handleChartTimeValue,
    cardContentValue,
  } = props;

  const { t } = useTranslation();
  const { user: loggedUser, instance, permissions } = useAuth();

  const isEmailVisible = isVisible(
    instance?.emailInProfileVisibility,
    loggedUser,
    permissions,
  );

  return (
    <Menu
      anchorEl={cardContentMenuAnchorEl}
      open={Boolean(cardContentMenuAnchorEl)}
      onClose={handleCardContentMenuClose}
      sx={{
        borderRadius: '4px',
        '& .MuiPaper-root': {
          borderRadius: '4px !important',
        },
      }}
      MenuListProps={{
        'aria-labelledby': 'basic-button',
      }}
    >
      {isEmailVisible && (
        <MenuItem
          onClick={handleChartEmailValue}
          sx={{ px: 2, py: '6px' }}
        >
          <Checkbox checked={cardContentValue.includes('email')} />
          <Typography sx={{ mr: 2 }}>{t('EMAIL')}</Typography>
        </MenuItem>
      )}
      {instance?.allowHiringDate && (
        <MenuItem
          onClick={handleChartTimeValue}
          sx={{ px: 2, py: '6px' }}
        >
          <Checkbox checked={cardContentValue.includes('time')} />
          <Typography sx={{ mr: 2 }}>{t('HIREDATE')}</Typography>
        </MenuItem>
      )}
      <MenuItem
        onClick={handleChartDepartmentValue}
        sx={{ px: 2, py: '6px' }}
      >
        <Checkbox checked={cardContentValue.includes('department')} />
        <Typography sx={{ mr: 2 }}>{t('DEPARTMENT')}</Typography>
      </MenuItem>
      <MenuItem
        onClick={handleChartPositionValue}
        sx={{ px: 2, py: '6px' }}
      >
        <Checkbox checked={cardContentValue.includes('position')} />
        <Typography sx={{ mr: 2 }}>{t('POSITION')}</Typography>
      </MenuItem>
    </Menu>
  );
};

export default CardContentMenu;