import React from 'react';
import Box from '@mui/material/Box';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
import { Trans } from '@lingui/macro';
import { WeekInfo } from '../../types/shift';
import { getCurrentWeekInfo, getPreviousWeek, getNextWeek, getWeekInfo } from '../../utils/weekUtils';

interface WeekNavigatorProps {
  weekInfo: WeekInfo;
  onWeekChange: (weekInfo: WeekInfo) => void;
  showYear?: boolean;
}

const WeekNavigator: React.FC<WeekNavigatorProps> = ({
  weekInfo,
  onWeekChange,
  showYear = false,
}) => {
  const handlePreviousWeek = () => {
    const { year, week } = getPreviousWeek(weekInfo.year, weekInfo.week);
    onWeekChange(getWeekInfo(year, week));
  };

  const handleNextWeek = () => {
    const { year, week } = getNextWeek(weekInfo.year, weekInfo.week);
    onWeekChange(getWeekInfo(year, week));
  };

  const handleToday = () => {
    onWeekChange(getCurrentWeekInfo());
  };

  return (
    <Box
      sx={{
        display: 'flex',
        alignItems: 'center',
        gap: 2,
      }}
    >
      <IconButton onClick={handlePreviousWeek} size="small">
        <ChevronLeftIcon />
      </IconButton>

      <Button variant="outlined" onClick={handleToday}>
        <Trans>Heute</Trans>
      </Button>

      <Typography variant="h6">
        <Trans>KW</Trans> {weekInfo.week}
        {showYear && ` ${weekInfo.year}`}
      </Typography>

      <IconButton onClick={handleNextWeek} size="small">
        <ChevronRightIcon />
      </IconButton>
    </Box>
  );
};

export default WeekNavigator;