import { parseAsInteger, useQueryState } from 'nuqs';
import Stack from '@material-hu/mui/Stack';

import FiltersButton from '@material-hu/components/composed-components/Filters/FiltersButton';
import MenuList, {
  type MenuListProps,
} from '@material-hu/components/composed-components/MenuList';

type ReceiptYearsFilterProps = {
  receiptYears: number[];
};

export const ReceiptYearsFilter = ({
  receiptYears,
}: ReceiptYearsFilterProps) => {
  const [selectedYear, setSelectedYear] = useQueryState('year', parseAsInteger);

  const filterOptions: MenuListProps['options'] = [
    {
      title: 'Todos',
      onClick: () => setSelectedYear(null),
    },
    ...receiptYears.map(year => ({
      title: `${year}`,
      onClick: () => setSelectedYear(year),
      disabled: selectedYear === year,
    })),
  ];

  return (
    <MenuList
      aria-label="Filtrar por año"
      options={filterOptions}
      position="right"
      customButton={
        <Stack sx={{ display: 'inline-flex' }}>
          <FiltersButton
            count={selectedYear ? 1 : 0}
            onClick={() => undefined}
          />
        </Stack>
      }
    />
  );
};
