import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import Accordion from '@material-hu/components/design-system/Accordion';
import CardContainer from '@material-hu/components/design-system/CardContainer';
import FormDatePicker, {
  type FormDatePickerProps,
} from '@material-hu/components/design-system/Inputs/DatePicker/form';

import { useLokaliseTranslation } from 'src/utils/i18n';

export const RankingDateFilter = () => {
  const { palette } = useTheme();
  const { t } = useLokaliseTranslation('acknowledgements');

  const datePickerProps: FormDatePickerProps['inputProps'] = {
    views: ['year', 'month', 'day'] as const,
    format: 'dd/MM/yyyy',
    fullWidth: true,
    disableFuture: true,
  };

  return (
    <Accordion
      title={t('date_label')}
      elevation={0}
      sx={{ backgroundColor: palette.new.background.layout.default }}
      customDetail={
        <CardContainer fullWidth>
          <Stack sx={{ gap: 2 }}>
            <Stack>
              <Typography
                variant="globalS"
                fontWeight="fontWeightSemiBold"
                sx={{ mb: 1 }}
              >
                {t('from')}
              </Typography>
              <FormDatePicker
                name="startDate"
                inputProps={datePickerProps}
              />
            </Stack>
            <Stack>
              <Typography
                variant="globalS"
                fontWeight="fontWeightSemiBold"
                sx={{ mb: 1 }}
              >
                {t('general:until')}
              </Typography>
              <FormDatePicker
                name="endDate"
                inputProps={datePickerProps}
              />
            </Stack>
          </Stack>
        </CardContainer>
      }
    />
  );
};
