import { SyntheticEvent } from 'react';

import { IconCalendarEvent } from '@material-hu/icons/tabler';
import Divider from '@material-hu/mui/Divider';
import Popover from '@material-hu/mui/Popover';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import Avatar from '@material-hu/components/design-system/Avatar';
import Pills from '@material-hu/components/design-system/Pills';
import Title from '@material-hu/components/design-system/Title';

import { TimeOffShiftPopoverInfo } from 'src/types/shifts';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { iconsPolicyTypes } from 'src/utils/vacations';

type Props = {
  anchor: Element | null;
  closePopover: () => void;
  timeOffInfo: TimeOffShiftPopoverInfo | null;
};

const TimeOffPopover = ({ anchor, closePopover, timeOffInfo }: Props) => {
  const { t } = useLokaliseTranslation(['shifts', 'time_tracking_common']);
  const { name, description, icon, isWorkable } = timeOffInfo || {};

  if (!name) {
    return null;
  }
  return (
    <Popover
      anchorEl={anchor}
      open={Boolean(anchor && description)}
      onClose={(e: SyntheticEvent) => {
        e.stopPropagation();
        closePopover();
      }}
      anchorOrigin={{
        vertical: 'bottom',
        horizontal: 'left',
      }}
      onClick={e => {
        e.stopPropagation();
      }}
    >
      <Stack sx={{ width: 312 }}>
        <Stack
          sx={{ flexDirection: 'row', alignItems: 'center', gap: 1, p: 2 }}
        >
          <Avatar Icon={icon ? iconsPolicyTypes[icon] : IconCalendarEvent} />
          <Title
            title={name}
            description={description}
          />
        </Stack>
        <Divider />
        <Stack sx={{ gap: 1, p: 2 }}>
          <Typography
            variant="globalS"
            sx={{
              fontWeight: 'fontWeightSemiBold',
            }}
          >
            {t('time_tracking_common:time_offs_permits.time_off_type')}
          </Typography>
          <Pills
            label={
              isWorkable
                ? t('time_tracking_common:time_offs_permits.workable')
                : t('time_tracking_common:time_offs_permits.non_workable')
            }
            size="small"
            hasIcon={false}
            type="neutral"
            sx={{ width: 'fit-content' }}
          />
        </Stack>
      </Stack>
    </Popover>
  );
};

export default TimeOffPopover;