import { useMemo } from 'react';

import { IconCircleChevronDown } from '@material-hu/icons/tabler';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

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

import { svgColorCorrection } from 'src/pages/dashboard/timeTracking/constants';
import { type ParsedHoliday } from 'src/types/timeTracking';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { displayHoursAndMinutes } from 'src/utils/timeTracking';

type Props = {
  isScheduledDayOff: boolean;
  dailyView?: boolean;
  estimatedHours?: number;
  holiday?: ParsedHoliday;
  isWorkday?: boolean; // Only needed for the daily view (display hours or holiday name)
  onOpenDayOffPopover?: (event: React.MouseEvent<HTMLElement>) => void;
  onOpenSchedulePopover?: (event: React.MouseEvent<HTMLElement>) => void;
  scheduledHours?: number;
};

const ProgrammedHours = (props: Props) => {
  const {
    scheduledHours = 0,
    estimatedHours = 0,
    holiday,
    isScheduledDayOff,
    dailyView = false,
    onOpenDayOffPopover,
    onOpenSchedulePopover,
    isWorkday = true,
  } = props;
  const { t } = useLokaliseTranslation('time_tracker');

  const checkAppliedDayOff = () => {
    if (holiday) {
      return holiday.name;
    }
    // day_off wording is used in the daily view, otherwise show 00h 00m
    return dailyView && isScheduledDayOff
      ? t('day_off')
      : t('time_tracking_common:hours_and_minutes_abbreviated', {
          hours: '00',
          minutes: '00',
        });
  };

  const finalEstimatedHours =
    estimatedHours || Math.max(scheduledHours - (holiday?.hours || 0), 0);

  const displayHours = isWorkday
    ? displayHoursAndMinutes(finalEstimatedHours, false, true)
    : checkAppliedDayOff();

  const HolidayIndicator = useMemo(() => {
    if (holiday) {
      const Avatar = (
        <HuAvatar
          size="small"
          Icon={holiday.icon}
          sx={{ borderRadius: '50%' }}
        />
      );
      if (onOpenDayOffPopover && scheduledHours > 0) {
        return (
          <IconButton
            id="dayoff"
            aria-label={t('see_holiday_time_off_info')}
            aria-haspopup="true"
            sx={{ p: 0, borderRadius: '50%' }}
            onClick={onOpenDayOffPopover}
            disableRipple
          >
            {Avatar}
          </IconButton>
        );
      }
      return Avatar;
    }
    return null;
  }, [holiday, t]);

  const showSchedulePopover = onOpenSchedulePopover && scheduledHours > 0;

  return (
    <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}>
      {HolidayIndicator}
      <Typography
        variant="globalXS"
        sx={{ width: 'fit-content' }}
      >
        {displayHours}
      </Typography>
      {showSchedulePopover && (
        <IconButton
          id="schedule"
          aria-label={t('see_programmed_hours')}
          aria-haspopup="true"
          onClick={onOpenSchedulePopover}
          sx={{
            p: 0,
            ...svgColorCorrection('neutralText'),
          }}
          disableRipple
        >
          <IconCircleChevronDown size={16} />
        </IconButton>
      )}
    </Stack>
  );
};

export default ProgrammedHours;
