import { IconCalendarEvent } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import { type Theme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

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

import { type Holiday, type TimeOffRequest } from 'src/types/timeTracking';
import { type LokaliseTFunction, useLokaliseTranslation } from 'src/utils/i18n';
import { iconsPolicyTypes } from 'src/utils/vacations';

type Props = {
  timeOffRequests: TimeOffRequest[];
  holidays: Holiday[];
};

const getTimeOffLabel = (
  timeOff: TimeOffRequest,
  t: LokaliseTFunction,
): string => {
  switch (timeOff.consumptionType) {
    case 'HALF_DAY':
      return t('time_tracker:permission_half_day');
    case 'FULL_DAY':
      return t('time_tracker:permission_full_day');
    case 'HOURS':
      return t('time_tracker:permission_time_range');
    default:
      return t('time_tracker:permission_type');
  }
};

const getTimeOffSubline = (
  timeOff: TimeOffRequest,
  t: LokaliseTFunction,
): string | null => {
  if (
    timeOff.consumptionType === 'HOURS' &&
    timeOff.fromTime &&
    timeOff.toTime
  ) {
    return t('time_tracking_common:hours_from_to', {
      startHour: timeOff.fromTime,
      endHour: timeOff.toTime,
    });
  }

  if (
    timeOff.fromDate &&
    timeOff.toDate &&
    timeOff.fromDate !== timeOff.toDate
  ) {
    return t('time_tracking_common:dates_from_to', {
      startDate: timeOff.fromDate,
      endDate: timeOff.toDate,
    });
  }

  return null;
};

const TimeOffItem = ({ timeOff }: { timeOff: TimeOffRequest }) => {
  const { t } = useLokaliseTranslation('time_tracker');
  const Icon =
    iconsPolicyTypes[timeOff.timeOffPolicyTypeIcon] ?? IconCalendarEvent;
  const isWorkable = timeOff.activityType === 'WORK';
  const label = getTimeOffLabel(timeOff, t);
  const subline = getTimeOffSubline(timeOff, t);

  return (
    <Stack
      sx={{
        flexDirection: 'row',
        alignItems: 'center',
        gap: 1.5,
      }}
    >
      <HuAvatar
        Icon={Icon}
        color="primary"
      />
      <Stack sx={{ flex: 1, minWidth: 0 }}>
        <Typography
          variant="globalXXS"
          sx={{
            color: ({ palette }: Theme) => palette.new.text.neutral.lighter,
          }}
        >
          {label}
        </Typography>
        <Typography
          variant="globalS"
          sx={{ fontWeight: 'bold' }}
        >
          {timeOff.timeOffPolicyTypeName}
        </Typography>
        {subline && (
          <Typography
            variant="globalXXS"
            sx={{
              color: ({ palette }: Theme) => palette.new.text.neutral.lighter,
            }}
          >
            {subline}
          </Typography>
        )}
      </Stack>
      <HuPills
        type={isWorkable ? 'info' : 'error'}
        label={isWorkable ? t('workable_label') : t('non_workable_label')}
        hasIcon={isWorkable}
        size="small"
        sx={{ flexShrink: 0 }}
      />
    </Stack>
  );
};

const HolidayItem = ({
  holiday,
  isWorkday,
}: {
  holiday: Holiday;
  isWorkday: boolean;
}) => {
  const { t } = useLokaliseTranslation('time_tracker');

  return (
    <Stack
      sx={{
        flexDirection: 'row',
        alignItems: 'center',
        gap: 1.5,
      }}
    >
      <HuAvatar
        Icon={IconCalendarEvent}
        color="primary"
      />
      <Stack sx={{ flex: 1, minWidth: 0 }}>
        <Typography
          variant="globalXXS"
          sx={{
            color: ({ palette }: Theme) => palette.new.text.neutral.lighter,
          }}
        >
          {t('holiday_label')}
        </Typography>
        <Typography
          variant="globalS"
          sx={{ fontWeight: 'bold' }}
        >
          {holiday.holidayName}
        </Typography>
      </Stack>
      <HuPills
        type={isWorkday ? 'info' : 'error'}
        label={isWorkday ? t('workable_label') : t('non_workable_label')}
        hasIcon={isWorkday}
        size="small"
        sx={{ flexShrink: 0 }}
      />
    </Stack>
  );
};

type SectionProps = Props & {
  isWorkday: boolean;
};

const TimeOffHolidaysSection = ({
  timeOffRequests,
  holidays,
  isWorkday,
}: SectionProps) => {
  const { t } = useLokaliseTranslation('time_tracker');

  if (timeOffRequests.length === 0 && holidays.length === 0) return null;

  return (
    <Stack sx={{ gap: 1.5 }}>
      <Typography
        variant="globalS"
        sx={{ fontWeight: 'bold' }}
      >
        {t('time_off_holidays_section_title')}
      </Typography>
      {timeOffRequests.map(timeOff => (
        <TimeOffItem
          key={timeOff.id}
          timeOff={timeOff}
        />
      ))}
      {holidays.map(holiday => (
        <HolidayItem
          key={holiday.id}
          holiday={holiday}
          isWorkday={isWorkday}
        />
      ))}
    </Stack>
  );
};

export default TimeOffHolidaysSection;
