import { FC } from 'react';

import { isAfter } from 'date-fns';

import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';

import HuPills from '@material-hu/components/design-system/Pills';
import HuTooltip from '@material-hu/components/design-system/Tooltip';

import {
  ScheduleSource,
  TrackingDayType,
  UserTrackingStatus,
} from 'src/types/timeTracking';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { dateStatusTag, parseDayScheduleStatus } from 'src/utils/timeTracking';

import { TOOLTIP_DELAY } from '../../../constants';
import ProgressBar from '../../ProgressBar';

type Props = {
  date: string;
  estimatedHours: number;
  workedHours: number;
  status: UserTrackingStatus;
  extraHours: number;
  isCurrentDate: boolean;
  scheduleSource: ScheduleSource;
  isWorkday: boolean;
};

const ProgressIndicator: FC<Props> = props => {
  const {
    date,
    estimatedHours,
    status,
    workedHours,
    extraHours,
    isCurrentDate,
    scheduleSource,
    isWorkday,
  } = props;
  const { t } = useLokaliseTranslation('time_tracker');
  const { palette } = useTheme();

  const isFreeDay = estimatedHours === 0;
  const isFutureDay = isAfter(new Date(date), new Date());
  const showTag = isCurrentDate || isFreeDay || isFutureDay;

  const getDateType = () => {
    if (date === TrackingDayType.VACATION) {
      return TrackingDayType.VACATION;
    }
    if (estimatedHours === 0) {
      return TrackingDayType.FREE;
    }
    return TrackingDayType.WORK;
  };

  const tag = dateStatusTag(isCurrentDate, status, getDateType(), palette, t);

  const { isScheduledDayOff } = parseDayScheduleStatus({
    isWorkday: isWorkday,
    scheduleSource: scheduleSource,
  });

  return (
    <>
      <Stack sx={{ gap: 0.5 }}>
        {showTag && (
          <HuTooltip
            disableTooltip={getDateType() === TrackingDayType.WORK}
            description={t('NO_SCHEDULE')}
            direction="top"
            delay={TOOLTIP_DELAY}
          >
            <span>
              <HuPills
                label={tag.label}
                size="small"
                type={tag.type}
                hasIcon={false}
              />
            </span>
          </HuTooltip>
        )}
        {!showTag && (
          <ProgressBar
            worked={workedHours}
            estimated={estimatedHours}
            extra={extraHours}
            isDayOffOrHoliday={isScheduledDayOff}
            showTooltip
          />
        )}
      </Stack>
    </>
  );
};

export default ProgressIndicator;
