import { IconInfoCircle } 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 HuTooltip from '@material-hu/components/design-system/Tooltip';

import { type DayDetailCategorizedHour } from 'src/types/timeTracking';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { formatCompleteDecimalHours } from 'src/utils/timeTracking';

type Props = {
  categorizedHours: DayDetailCategorizedHour[];
};

const CategorizedHoursSection = ({ categorizedHours }: Props) => {
  const { t } = useLokaliseTranslation('time_tracker');

  if (categorizedHours.length === 0) return null;

  return (
    <Stack sx={{ gap: 1 }}>
      <Typography
        variant="globalS"
        sx={{ fontWeight: 'semiBold' }}
      >
        {t('categorized_hours_title')}
      </Typography>
      {categorizedHours.map(({ category, hours }) => (
        <Stack
          key={category.name}
          sx={{
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between',
          }}
        >
          <Stack
            sx={{
              flexDirection: 'row',
              alignItems: 'center',
              gap: 0.5,
            }}
          >
            <Typography variant="globalS">{category.name}</Typography>
            <HuTooltip
              title={category.description}
              direction="bottom"
            >
              <IconInfoCircle
                size={16}
                color="inherit"
                style={{ cursor: 'pointer' }}
              />
            </HuTooltip>
          </Stack>
          <Typography
            variant="globalS"
            sx={{
              color: ({ palette }: Theme) => palette.new.text.neutral.lighter,
            }}
          >
            {formatCompleteDecimalHours(hours)}
          </Typography>
        </Stack>
      ))}
    </Stack>
  );
};

export default CategorizedHoursSection;
