import { useEffect, useMemo, useRef } from 'react';

import { Button, Stack } from '@mui/material';
import { shiftDateYear } from '@utils/time';
import { isValid } from 'date-fns';

import { type DateRange } from '../../types';

import { type YearsSelectorProps } from './types';

const YearsSelector = (props: YearsSelectorProps) => {
  const { customDates, setCustomDates, onChange, onViewChange } = props;
  const BASE_YEAR = 1900;
  const yearsContainerRef = useRef<HTMLDivElement>(null);
  const lastCustomDate = useRef<DateRange>();

  const { fromDate, toDate } = customDates;

  const selectedYear = fromDate?.getFullYear();

  const handleYearClick = (year: number) => {
    onViewChange?.('day');
    if (fromDate && isValid(fromDate) && toDate && isValid(toDate)) {
      onChange?.(shiftDateYear(fromDate, year));
      setCustomDates({
        fromDate: shiftDateYear(fromDate, year),
        toDate: shiftDateYear(toDate, year),
      });
    } else {
      onChange?.(
        shiftDateYear(lastCustomDate.current?.fromDate || new Date(), year),
      );
      setCustomDates({
        fromDate: shiftDateYear(
          lastCustomDate.current?.fromDate || new Date(),
          year,
        ),
        toDate: shiftDateYear(
          lastCustomDate.current?.fromDate || new Date(),
          year,
        ),
      });
    }
  };

  const yearsList = useMemo(
    () =>
      Array.from({ length: 200 }, (_, index) => (
        <Button
          variant={selectedYear === index + BASE_YEAR ? 'primary' : 'tertiary'}
          key={index + BASE_YEAR}
          data-year={index + BASE_YEAR}
          onClick={() => {
            handleYearClick(index + BASE_YEAR);
          }}
        >
          {index + BASE_YEAR}
        </Button>
      )),
    [customDates],
  );

  // Scroll to the selected year or if there is no custom date, scroll to the current year
  useEffect(() => {
    lastCustomDate.current = customDates;
    if (yearsContainerRef.current) {
      const year =
        customDates.fromDate?.getFullYear() || new Date().getFullYear();
      const yearElement = yearsContainerRef.current.querySelector(
        `button[data-year="${year}"]`,
      );

      if (yearElement) {
        yearElement.scrollIntoView({
          behavior: 'instant',
          block: 'center',
        });
      }
    }
  }, []);

  return (
    <Stack
      ref={yearsContainerRef}
      sx={{
        flexDirection: 'row',
        flexWrap: 'wrap',
        maxWidth: 320,
        maxHeight: 334,
        overflowY: 'scroll',
      }}
    >
      {yearsList}
    </Stack>
  );
};

export default YearsSelector;
