import {
  classNames,
  create,
  createEventRegistrar,
  text,
} from "@hesxenon/prelude/Dom.js";
import { addYears } from "date-fns/fp";
import { Events } from "../events";
import { connectSelection } from "../parts/selection";
import { Connect, View } from "../uwc-datepicker";

const getPageRange = (date: Date) => {
  const currentOffset =
    date.getFullYear() % UwcDatepickerElement.config.yearsPerPage;
  const start = date.getFullYear() - currentOffset;

  return [start, start + UwcDatepickerElement.config.yearsPerPage] as const;
};

const connectGrid: Connect = (datepicker, opts) => {
  const on = createEventRegistrar(datepicker, opts.disconnect);

  const createGrid = () => {
    const years = create("ul", { role: "grid" });

    const [startYear, endYear] = getPageRange(datepicker.anchorDate);
    const currentYear = datepicker.anchorDate.getFullYear();

    const now = new Date();
    const start = addYears(-(currentYear - startYear), datepicker.anchorDate);
    const end = addYears(endYear - currentYear, datepicker.anchorDate);

    let cursor = start;
    while (cursor < end) {
      const next = addYears(1, cursor);

      const dataValue = cursor.toISOString();

      years.append(
        create(
          "li",
          {
            className: classNames({
              current: cursor <= now && now <= next,
            }),
            "data-value": dataValue,
          },
          [text(cursor.getFullYear())],
        ),
      );

      cursor = next;
    }

    return years;
  };

  let grid = createGrid();

  on(Events["anchor-dateChanged"], () => {
    grid.remove();
    grid = createGrid();
    datepicker.append(grid);
  });

  datepicker.append(grid);
};

export const yearView: View = {
  addOneUnit: addYears(1),
  connect: (datepicker, opts) => {
    const yearsPerPage = UwcDatepickerElement.config.yearsPerPage;
    connectSelection(datepicker, {
      addPages: (amount, toDate) => addYears(-yearsPerPage * amount, toDate),
      leapPages: 10,
      getStartOfPage: (date) =>
        addYears(-(date.getFullYear() - getPageRange(date)[0]), date),
      getLabel: (date) => {
        const [start, end] = getPageRange(date);
        return `${start} - ${end - 1}`;
      },
      disconnect: opts.disconnect,
    });

    connectGrid(datepicker, opts);
  },
};