"use client";
// Adapted from Adobe React Spectrum starters (Apache-2.0).
// Modified: owned composition, local runtime, scoped CSS and customization.
// See THIRD_PARTY_NOTICES.md.
import {
  DateRangePicker as AriaDateRangePicker,
  type DateRangePickerProps as AriaProps,
  type DateValue,
  DateInput,
  DateSegment,
  Group,
  Button,
  Popover,
  Dialog,
  RangeCalendar,
  CalendarGrid,
  CalendarCell,
  Heading,
  Label,
  Text,
  FieldError,
  type ValidationResult,
  composeRenderProps,
} from "./react-aria-runtime.js";
import type { CSSProperties } from "react";
export { parseDate, today, getLocalTimeZone } from "./react-aria-runtime.js";
export interface DateRangePickerProps<T extends DateValue> extends Omit<
  AriaProps<T>,
  "children"
> {
  label: string;
  description?: string;
  errorMessage?: string | ((validation: ValidationResult) => string);
  popoverClassName?: string;
  popoverStyle?: CSSProperties;
}
export function DateRangePicker<T extends DateValue>({
  label,
  description,
  errorMessage,
  className,
  popoverClassName,
  popoverStyle,
  ...props
}: DateRangePickerProps<T>) {
  return (
    <AriaDateRangePicker
      {...props}
      className={composeRenderProps(
        className,
        (value) => `ynr-date-range-picker ynr-aria ${value ?? ""}`,
      )}
    >
      <Label className="ynr-aria-label">{label}</Label>
      <Group className="ynr-aria-control">
        <DateInput slot="start" className="ynr-aria-date-input">
          {(segment) => (
            <DateSegment segment={segment} className="ynr-aria-segment" />
          )}
        </DateInput>
        <span aria-hidden="true">–</span>
        <DateInput slot="end" className="ynr-aria-date-input">
          {(segment) => (
            <DateSegment segment={segment} className="ynr-aria-segment" />
          )}
        </DateInput>
        <Button aria-label="Open calendar" className="ynr-aria-button">
          ⌄
        </Button>
      </Group>
      {description && (
        <Text slot="description" className="ynr-aria-description">
          {description}
        </Text>
      )}
      <FieldError className="ynr-aria-error">{errorMessage}</FieldError>
      <Popover
        className={`ynr-aria-popover ynr-date-range-picker-popover ${popoverClassName ?? ""}`}
        style={popoverStyle}
      >
        <Dialog className="ynr-aria-calendar-dialog">
          <RangeCalendar className="ynr-aria-calendar">
            <header className="ynr-aria-calendar-header">
              <Button slot="previous" className="ynr-aria-button">
                ‹
              </Button>
              <Heading />
              <Button slot="next" className="ynr-aria-button">
                ›
              </Button>
            </header>
            <CalendarGrid>
              {(date) => (
                <CalendarCell date={date} className="ynr-aria-calendar-cell" />
              )}
            </CalendarGrid>
          </RangeCalendar>
        </Dialog>
      </Popover>
    </AriaDateRangePicker>
  );
}