import * as React from "react";
import classNames from "classnames";
import { AriaDateRangePickerProps, DateValue, useDateRangePicker } from "react-aria";
import { useDateRangePickerState } from "react-stately";

import { Calendar as CalendarIcon } from "@faulty/gdq-icons/icons/Calendar";

import { Card } from "../Card/Card";
import { Clickable } from "../Clickable/Clickable";
import { Control, ControlInputProps } from "../Control/Control";
import { InputAttachmentProps, InputWithAttachments, useInputStyleClasses } from "../Input/Input";
import { useInteractiveClass } from "../Interactive/Interactive";
import { Spacer, Stack } from "../Stack/Stack";
import { RangeCalendar } from "./Calendar";
import { DateTimeField } from "./DateTimeField";
import { PickerPopover } from "./PickerPopover";

import styles from "./DatePicker.module.css";

export interface DateRangePickerProps<T extends DateValue>
  extends AriaDateRangePickerProps<T>,
    ControlInputProps,
    InputAttachmentProps {
  // TODO: Not sure of the best way to inherent these props directly
  /**
   * Determines whether the date picker popover should close automatically when a date is selected.
   * @default true
   */
  shouldCloseOnSelect?: boolean | (() => boolean);
}

export function DateRangePicker<T extends DateValue>(props: DateRangePickerProps<T>) {
  const inputStyles = useInputStyleClasses(props);

  const ref = React.useRef<HTMLDivElement>(null);
  const state = useDateRangePickerState(props);
  const {
    buttonProps,
    calendarProps,
    dialogProps,
    labelProps,
    descriptionProps,
    startFieldProps,
    endFieldProps,
    errorMessageProps,
    groupProps,
  } = useDateRangePicker(props, state, ref);

  const interactiveClass = useInteractiveClass({ background: true });

  return (
    <Control
      {...props}
      labelProps={labelProps}
      descriptionProps={descriptionProps}
      errorMessageProps={errorMessageProps}>
      <InputWithAttachments {...props}>
        <Stack asChild direction="horizontal" justify="space-between" align="center">
          <div
            {...groupProps}
            ref={ref}
            className={classNames(styles.container, inputStyles.inputPadding)}>
            <Stack direction="horizontal" justify="start" align="center">
              <DateTimeField {...startFieldProps} />
              <Spacer />
              &ndash;
              <Spacer />
              <DateTimeField {...endFieldProps} />
            </Stack>
            <Clickable
              {...buttonProps}
              className={classNames(styles.triggerButton, interactiveClass)}>
              <CalendarIcon style={{ display: "block" }} size={20} />
            </Clickable>
          </div>
        </Stack>
      </InputWithAttachments>
      {state.isOpen ? (
        <PickerPopover
          state={state}
          triggerRef={ref}
          placement="bottom start"
          dialogProps={dialogProps}>
          <Card floating>
            <RangeCalendar {...calendarProps} />
          </Card>
        </PickerPopover>
      ) : null}
    </Control>
  );
}