import type { JSX } from "solid-js";
import { splitProps } from "solid-js";
import { useCalendarContext } from "./calendar-context";
import type { CalendarNavProps, CalendarPrevProps, CalendarNextProps } from "./calendar.props";

/** Container for the calendar's previous/next month navigation buttons. */
export function CalendarNav(props: CalendarNavProps): JSX.Element {
  const [local, rest] = splitProps(props, ["children"]);
  return (
    <div data-scope="calendar" data-part="nav" {...rest}>
      {local.children}
    </div>
  );
}

/** Button that navigates the calendar to the previous month. */
export function CalendarPrevButton(props: CalendarPrevProps): JSX.Element {
  const [local, rest] = splitProps(props, ["children"]);
  const ctx = useCalendarContext();
  return (
    <button
      data-scope="calendar"
      data-part="prev-button"
      type="button"
      aria-label="Go to previous month"
      disabled={ctx.disabled()}
      onClick={ctx.goToPrevMonth}
      {...rest}
    >
      {local.children ?? "<"}
    </button>
  );
}

/** Button that navigates the calendar to the next month. */
export function CalendarNextButton(props: CalendarNextProps): JSX.Element {
  const [local, rest] = splitProps(props, ["children"]);
  const ctx = useCalendarContext();
  return (
    <button
      data-scope="calendar"
      data-part="next-button"
      type="button"
      aria-label="Go to next month"
      disabled={ctx.disabled()}
      onClick={ctx.goToNextMonth}
      {...rest}
    >
      {local.children ?? ">"}
    </button>
  );
}
