import { useEffect, useRef, useState } from 'preact/hooks';

const CalendarRangePicker = () => {
  const calendarRef = useRef<HTMLElement>(null);

  useEffect(() => {
    const calendarElement = calendarRef.current;
    if (!calendarElement) return;

    const handleChange = (event: Event) => {
      const newValue = (event.target as HTMLElement).getAttribute('value');
      if (newValue) {
        setSelectedRange(newValue);
        // Additional logic to handle the selected date range
      }
    };

    calendarElement.addEventListener('change', handleChange);
    return () => {
      calendarElement.removeEventListener('change', handleChange);
    };
  }, []);

  const today = new Date().toLocaleString().split(',')[0];
  const tomorrow = new Date().toLocaleString().split(',')[0];

  const [selectedRange, setSelectedRange] = useState(`${today}/${tomorrow}`);

  return (
    <calendar-range
      ref={calendarRef}
      value={selectedRange}
      months={1}
      locale="en-GB"
      min="2025-01-01"
      max={tomorrow}
    >
      <calendar-month></calendar-month>
    </calendar-range>
  );
};

export default CalendarRangePicker;


declare module "preact" {
  namespace JSX {
    interface IntrinsicElements {
      ["calendar-range"]: {
        value?: string;
        min?: string;
        max?: string;
        locale?: string;
        months?: number;
        children?: Element;
        ref?: RefObject<HTMLElement>;
        onChange?: (event: Event) => void;
      };
      ["calendar-month"]: any;
    }
  }
}