import { FC, SyntheticEvent } from 'react';

import Chip from '@material-hu/mui/Chip';
import Popover from '@material-hu/mui/Popover';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { formatCompleteDecimalHours } from 'src/utils/timeTracking';

type Props = {
  anchor: HTMLElement | null;
  closePopover: () => void;
  isOpen: boolean;
  type: 'entries' | 'schedules';
  workSchedule?: {
    name: string;
    description: string;
    slots: string[];
    totalHours: number;
  };
};

const ScheduledHoursPopover: FC<Props> = props => {
  const { anchor, closePopover, isOpen, type, workSchedule } = props;
  const { t } = useLokaliseTranslation('time_tracker');
  const HuGoThemeProvider = useHuGoTheme();

  const slots = workSchedule?.slots || [];

  return (
    <HuGoThemeProvider>
      <Popover
        anchorEl={anchor}
        open={isOpen}
        onClose={(e: SyntheticEvent) => {
          e.stopPropagation();
          closePopover();
        }}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'left',
        }}
        onClick={e => {
          e.stopPropagation();
        }}
        slotProps={{
          paper: {
            sx: {
              bgcolor: ({ palette }) => palette.new.background.elements.default,
              border: ({ palette }) =>
                `1px solid ${palette.new.border.neutral.default}`,
            },
          },
        }}
      >
        <Stack sx={{ width: '338px' }}>
          <Stack sx={{ p: 2, gap: 0.5 }}>
            <Typography
              variant="globalS"
              sx={{
                color: ({ palette }) => palette.new.text.neutral.default,
                fontWeight: 'semiBold',
              }}
            >
              {workSchedule?.name || ''}
            </Typography>
            <Typography
              variant="globalXS"
              sx={{
                color: ({ palette }) => palette.new.text.neutral.lighter,
              }}
            >
              {workSchedule?.description || ''}
            </Typography>
          </Stack>
          {slots?.length > 0 && (
            <Stack
              sx={{
                borderTop: ({ palette }) =>
                  `1px solid ${palette.new.border.neutral.default}`,
                flexDirection: 'row',
                flexWrap: 'wrap',
                gap: 0.5,
                p: 2,
              }}
            >
              {slots.map(ts => (
                <Chip
                  key={ts}
                  label={
                    <Typography
                      variant="globalXXS"
                      sx={{
                        color: ({ palette }) =>
                          palette.new.text.neutral.lighter,
                        fontWeight: 'semiBold',
                      }}
                    >
                      {ts}
                    </Typography>
                  }
                  size="small"
                  sx={{
                    background: 'transparent',
                    border: ({ palette }) =>
                      `1px solid ${palette.new.border.neutral.default}`,
                    color: ({ palette }) => palette.new.text.neutral.lighter,
                    width: 'fit-content',
                  }}
                />
              ))}
            </Stack>
          )}
          <Stack
            sx={{
              borderTop: ({ palette }) =>
                `1px solid ${palette.new.border.neutral.default}`,
              flexDirection: 'row',
              justifyContent: 'space-between',
              p: 2,
            }}
          >
            <Typography
              variant="globalS"
              sx={{
                color: ({ palette }) => palette.new.text.neutral.default,
                fontWeight: 'semiBold',
              }}
            >
              {type === 'schedules' ? t('total_hours') : t('worked_hours')}
            </Typography>
            <Typography
              variant="globalS"
              sx={{
                color: ({ palette }) => palette.new.text.neutral.default,
              }}
            >
              {formatCompleteDecimalHours(workSchedule?.totalHours || 0)}
            </Typography>
          </Stack>
        </Stack>
      </Popover>
    </HuGoThemeProvider>
  );
};

export default ScheduledHoursPopover;