import { Helmet } from 'react-helmet-async';

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

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

import useCommunityFeature from 'src/hooks/useCommunityFeature';
import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { CommunityFeature } from 'src/types/communityFeatures';
import { formatTitle } from 'src/utils/helmetUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { useClockingInfo } from 'src/components/dashboard/hooks/timeTracking';

import TimeHistory from './components/TimeHistory';
import TimeTrack from './components/TimeTrack';

const Clock = () => {
  const { t } = useLokaliseTranslation('time_tracker');
  const HuGoThemeProvider = useHuGoTheme();
  const clockingInfo = useClockingInfo();
  const { timeTrackingClockIsEnabled } = clockingInfo;
  const isCheckingHistoryHidden = useCommunityFeature(
    CommunityFeature.TIME_TRACKING_HIDE_CHECK_HISTORY,
  );

  const title = t('checker_clock');

  return (
    <HuGoThemeProvider>
      <Helmet>
        <title>{formatTitle(title)}</title>
      </Helmet>
      <Stack
        sx={{
          backgroundColor: ({ palette }: Theme) =>
            palette.new.background.layout.default,
          minHeight: '100%',
          py: 6,
          px: 3,
          gap: 4,
          flexDirection: 'column',
          display: 'flex',
        }}
      >
        {timeTrackingClockIsEnabled && (
          <Stack sx={{ gap: 2 }}>
            <Title
              variant="L"
              title={title}
            />

            <TimeTrack clockingInfo={clockingInfo} />
          </Stack>
        )}
        {!isCheckingHistoryHidden && (
          <TimeHistory isClockRunning={clockingInfo.isClockRunning} />
        )}
      </Stack>
    </HuGoThemeProvider>
  );
};

export default Clock;