import { type FC } from 'react';

import { IconChevronRight, IconUserOff } from '@material-hu/icons/tabler';

import HuAvatar from '@material-hu/components/design-system/Avatar';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import HuTableCell from '@material-hu/components/design-system/Table/components/TableCell';
import HuTableRow from '@material-hu/components/design-system/Table/components/TableRow';

import {
  type ControlRegister,
  UserAccountStatus,
} from 'src/types/timeTracking';
import { useLokaliseTranslation } from 'src/utils/i18n';
import {
  parseDayScheduleStatus,
  displayHoursAndMinutes,
} from 'src/utils/timeTracking';

import IncidenceSummary from '../../../../components/Incidences/IncidenceSummary';
import ProfilePicWithStatus from '../../../../components/ProfilePicWithStatus';
import ProgressBar from '../../../../components/ProgressBar';
import { STICKY_OPTIONS_CELL_SX } from '../constants';

import ProgrammedHours from './ProgrammedHours';

type Props = {
  controlRegister: ControlRegister;
  navigateToUser: (id: number) => void;
  navigateToProfile: (id: number) => void;
};

const sxFitContent = { width: 'fit-content' };

const PeriodRow: FC<Props> = props => {
  const { controlRegister, navigateToUser } = props;
  const { t } = useLokaliseTranslation('time_tracker');

  const isDeactivated =
    controlRegister.userAccountStatus === UserAccountStatus.DEACTIVATED;
  const dayInfo = controlRegister.daySummaries[0];

  const { isScheduledDayOff } = parseDayScheduleStatus({
    holidays: dayInfo.holidays,
    isWorkday: dayInfo.isWorkday,
    scheduleSource: dayInfo.scheduleSource,
    timeOffRequests: dayInfo.timeOffRequests,
  });

  return (
    <HuTableRow
      sx={{
        '&:hover': {
          backgroundColor: ({ palette }) =>
            palette.new.background.elements.default,
        },
      }}
    >
      <HuTableCell align="left">
        <Stack
          sx={{
            flexDirection: 'row',
            alignItems: 'center',
            gap: 1,
          }}
        >
          {isDeactivated && (
            <HuAvatar
              Icon={IconUserOff}
              size="small"
              sx={{
                color: ({ palette }) => palette.new.text.neutral.disabled,
                backgroundColor: ({ palette }) =>
                  palette.new.background.layout.default,
              }}
            />
          )}
          {!isDeactivated && (
            <ProfilePicWithStatus
              status={controlRegister.status}
              userInfo={{
                id: controlRegister.userId,
                profilePicture: controlRegister.profilePicture,
                fullName: controlRegister.fullName,
              }}
            />
          )}
          <Typography
            variant="globalS"
            sx={sxFitContent}
          >
            {controlRegister.fullName}
          </Typography>
        </Stack>
      </HuTableCell>
      {!isDeactivated && (
        <>
          <HuTableCell align="left">
            <ProgrammedHours
              estimatedHours={controlRegister.estimatedHours}
              isScheduledDayOff={isScheduledDayOff}
            />
          </HuTableCell>
          <HuTableCell
            align="left"
            sx={{ minWidth: 183 }}
          >
            <Stack
              sx={{
                flexDirection: 'row',
                alignItems: 'center',
                gap: 0.5,
                '& > :first-of-type': {
                  flex: 1,
                },
              }}
            >
              <ProgressBar
                worked={controlRegister.workedHours}
                estimated={controlRegister.estimatedHours}
                isDayOffOrHoliday={false} // Force 00h 00m bar in case of a day off or holiday
                extra={0} // Extra hours specified in another cell
                showTooltip
              />
              <Typography
                variant="globalXS"
                sx={sxFitContent}
              >
                {displayHoursAndMinutes(
                  controlRegister.workedHours,
                  false,
                  true,
                )}
              </Typography>
            </Stack>
          </HuTableCell>
          <HuTableCell align="left">
            <Typography
              variant="globalXS"
              sx={sxFitContent}
            >
              {displayHoursAndMinutes(
                controlRegister.differenceHours,
                false,
                true,
              )}
            </Typography>
          </HuTableCell>
          <HuTableCell align="left">
            <Typography
              variant="globalXS"
              sx={sxFitContent}
            >
              {displayHoursAndMinutes(controlRegister.extraHours, false, true)}
            </Typography>
          </HuTableCell>
          <HuTableCell align="left">
            <Stack
              sx={{
                flexDirection: 'row',
                flexWrap: 'wrap',
                gap: 2,
              }}
            >
              <IncidenceSummary
                daySummary={dayInfo}
                incidenceTags={controlRegister.incidencesTagsPresent}
                isDeactivated={isDeactivated}
              />
            </Stack>
          </HuTableCell>
          <HuTableCell
            align="center"
            sx={{
              cursor: 'pointer',
              width: 72,
              ...STICKY_OPTIONS_CELL_SX,
              '& .tabler-icon': {
                stroke: ({ palette }) => palette.new.text.neutral.default,
              },
            }}
          >
            <IconButton
              aria-label={t('SEE_TRACKINGS_SHEET')}
              onClick={() => {
                navigateToUser(controlRegister.userId);
              }}
              sx={{ color: ({ palette }) => palette.new.text.neutral.default }}
            >
              <IconChevronRight />
            </IconButton>
          </HuTableCell>
        </>
      )}
      {isDeactivated && (
        <>
          <HuTableCell align="left" />
          <HuTableCell
            align="left"
            sx={{ minWidth: 183 }}
          />
          <HuTableCell align="left" />
          <HuTableCell align="left" />
          <HuTableCell align="left" />
          <HuTableCell
            align="center"
            sx={{ width: 72, ...STICKY_OPTIONS_CELL_SX }}
          />
        </>
      )}
    </HuTableRow>
  );
};

export default PeriodRow;
