import { FC } from 'react';

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

import { useAuth } from 'src/contexts/JWTContext';

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

export type HighlightMenuProps = {
  highlightMenuAnchorEl: any;
  handleHighlightMenuClose: () => void;
  handleChartHighlightValue: (value: boolean) => void;
  highlightedValue: boolean;
};

const HighlightMenu: FC<HighlightMenuProps> = props => {
  const {
    highlightMenuAnchorEl,
    handleHighlightMenuClose,
    handleChartHighlightValue,
    highlightedValue,
  } = props;

  const { instance } = useAuth();

  const { t } = useTranslation();

  return (
    <Menu
      anchorEl={highlightMenuAnchorEl}
      open={Boolean(highlightMenuAnchorEl)}
      onClose={handleHighlightMenuClose}
      sx={{
        borderRadius: '4px',
        '& .MuiPaper-root': {
          borderRadius: '4px !important',
        },
      }}
    >
      <MenuItem
        onClick={() => handleChartHighlightValue(false)}
        sx={{ px: 2, py: '6px' }}
      >
        <Radio checked={!highlightedValue} />
        <Typography sx={{ mr: 2 }}>{t('NONE')}</Typography>
      </MenuItem>
      {instance?.allowHiringDate && (
        <MenuItem
          onClick={() => handleChartHighlightValue(true)}
          sx={{ px: 2, py: '6px' }}
        >
          <Radio checked={highlightedValue} />
          <Typography sx={{ mr: 2 }}>{t('HIREDATE')}</Typography>
        </MenuItem>
      )}
    </Menu>
  );
};

export default HighlightMenu;