import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';
import CardContainer from '@material-hu/components/design-system/CardContainer';

import { useLokaliseTranslation } from 'src/utils/i18n';
import { useTimeHistory } from 'src/pages/dashboard/clock/hooks/useTimeHistory';

import DaySummaryRow from './DaySummaryRow';
import MonthSelector from './MonthSelector';
import TimeHistorySkeleton from './TimeHistorySkeleton';

type TimeHistoryProps = {
  isClockRunning: boolean;
};

const TimeHistory = ({ isClockRunning }: TimeHistoryProps) => {
  const { t } = useLokaliseTranslation('clock');
  const {
    daySummaries,
    isFetching,
    currentMonth,
    handlePrevMonth,
    handleNextMonth,
    nextMonthDisabled,
  } = useTimeHistory();

  const showInitialSkeleton = isFetching && daySummaries.length === 0;

  return (
    <Stack sx={{ gap: 0 }}>
      <Stack
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'space-between',
          mb: 2,
        }}
      >
        <Typography
          variant="globalM"
          sx={{ fontWeight: 'fontWeightBold' }}
        >
          {t('history.title')}
        </Typography>

        <MonthSelector
          currentMonth={currentMonth}
          onPrevMonth={handlePrevMonth}
          onNextMonth={handleNextMonth}
          nextMonthDisabled={nextMonthDisabled}
        />
      </Stack>

      {showInitialSkeleton && <TimeHistorySkeleton />}
      {!showInitialSkeleton && (
        <CardContainer fullWidth>
          {daySummaries.map((day, index) => (
            <DaySummaryRow
              key={day.id}
              day={day}
              isFirst={index === 0}
              isLast={index === daySummaries.length - 1}
              isClockRunning={isClockRunning}
            />
          ))}
        </CardContainer>
      )}
    </Stack>
  );
};

export default TimeHistory;