import type { Accessor } from "solid-js";
import { createContext, useContext } from "solid-js";

export interface DatePickerContextValue {
  isOpen: Accessor<boolean>;
  setOpen: (open: boolean) => void;
  toggle: () => void;
  value: Accessor<string | undefined>;
  setValue: (iso: string) => void;
  formatDate: (iso: string) => string;
  placeholder: Accessor<string>;
  disabled: Accessor<boolean>;
  name: Accessor<string | undefined>;
  minDate: Accessor<string | undefined>;
  maxDate: Accessor<string | undefined>;
  locale: Accessor<string>;
  contentId: Accessor<string>;
  triggerRef: Accessor<HTMLElement | null>;
  setTriggerRef: (el: HTMLElement | null) => void;
  contentRef: Accessor<HTMLElement | null>;
  setContentRef: (el: HTMLElement | null) => void;
  floatingStyle: Accessor<import("solid-js").JSX.CSSProperties>;
}

const DatePickerContext = createContext<DatePickerContextValue>();

/** Returns the DatePicker context. Throws if used outside a DatePicker root. */
export function useDatePickerContext(): DatePickerContextValue {
  const ctx = useContext(DatePickerContext);
  if (!ctx) {
    throw new Error(
      "[PettyUI] DatePicker parts must be used inside <DatePicker>. Wrap your DatePicker.Input, DatePicker.Content, etc. inside <DatePicker>.",
    );
  }
  return ctx;
}

export const DatePickerContextProvider = DatePickerContext.Provider;