import * as Dropdown from "@radix-ui/react-dropdown-menu";
import * as React from "react";
import { DatePicker, useDatePicker, useStore } from "chrono-select";

const months = "January_February_March_April_May_June_July_August_September_October_November_December".split("_");

const MonthsDropdown = ({ focusOnClose }: { focusOnClose?: (event: Event) => void }) => {
    const month = useDatePicker((state) => state.month);
    const store = useStore();

    function onSelect(month: number) {
        store.setState("month", month);
        store.setState("focused", "first");
    };

    return (
        <Dropdown.Root>
            <Dropdown.Trigger asChild >
                <button>{months[month]}</button>
            </Dropdown.Trigger>
            <Dropdown.Portal>
                <Dropdown.Content onCloseAutoFocus={focusOnClose}>
                    {months.map((monthName, idx) => (
                        <Dropdown.Item key={monthName}  onSelect={() => onSelect(idx)}>
                            {monthName}
                        </Dropdown.Item>
                    ))}
                </Dropdown.Content>
            </Dropdown.Portal>
        </Dropdown.Root>
    );
};

const DatePickerDemo = () => {
    const ref = React.useRef<HTMLDivElement | null>(null);   

    function focusOnClose(event: Event) {
      event.preventDefault();
      ref.current?.focus();
    }

    return (
        <DatePicker ref={ref} onSelectedChange={(date) => console.info(date)}>
            <MonthsDropdown focusOnClose={focusOnClose} />
            <DatePicker.MonthsWrapper />
        </DatePicker>
    );
};