'use strict';
'use client';
import { c } from 'react/compiler-runtime';
import { jsxs, jsx } from 'react/jsx-runtime';
import { useState, useEffect, useImperativeHandle } from 'react';
import { Tooltip } from '@base-ui/react/tooltip';
import * as Popover from '@radix-ui/react-popover';
import { Input } from '../input/Input.js';
import { Button } from '../button/Button.js';
import { Calendar } from '../calendar/Calendar.js';
import { Icon, iconSizes, iconNames } from '../icon/Icon.js';
import { cn } from '../../../fd-toolbox/lib/utils.js';
import { syncDateState, processLabelState, updateDateValue, onDatePickerOpenChange, onDateResetHandler, onDateChangeHandler, onTimeValueChange, localizedFormat, updateHours, updateMinutes } from './DatePicker.funcs.js';
import { LabelAnimation } from '../animation/LabelAnimation.js';
import { useAsyncEffect } from '../../../fd-toolbox/hooks/use-async-effect.js';
import { calendarCaptionLayout } from '../calendar/calendar-constants.js';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", {
  value,
  configurable: true
});
function DatePicker(t0) {
  const $ = c(18);
  const {
    className,
    enableTime,
    inputId,
    label: labelProp,
    onDateValueChange: onDateValueChangeProp,
    onTimeValueChange: onTimeValueChangeProp,
    date,
    shouldLabelAnimate,
    disabled,
    readOnly,
    skipAnimationOnce,
    variant,
    onOpenChange,
    ref
  } = t0;
  const [dateValue, setDateValue] = useState();
  let t1;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t1 = {
      hours: 0,
      minutes: 0
    };
    $[0] = t1;
  } else {
    t1 = $[0];
  }
  const [timeValue, setTimeValue] = useState(t1);
  const [label, setLabel] = useState(labelProp ?? "");
  const [showFullLabel, setShowFullLabel] = useState(true);
  const [hovered, setHovered] = useState(false);
  const [isOpen, setIsOpen] = useState(false);
  let t2;
  let t3;
  if ($[1] !== date) {
    t2 = () => {
      syncDateState(setDateValue, setTimeValue, date);
    };
    t3 = [date];
    $[1] = date;
    $[2] = t2;
    $[3] = t3;
  } else {
    t2 = $[2];
    t3 = $[3];
  }
  useEffect(t2, t3);
  let t4;
  let t5;
  if ($[4] !== label) {
    t4 = () => {
      processLabelState(label, setLabel, setShowFullLabel);
    };
    t5 = [label];
    $[4] = label;
    $[5] = t4;
    $[6] = t5;
  } else {
    t4 = $[5];
    t5 = $[6];
  }
  useEffect(t4, t5);
  let t6;
  if ($[7] !== onTimeValueChangeProp || $[8] !== timeValue) {
    t6 = async () => {
      onTimeValueChangeProp?.(timeValue);
    };
    $[7] = onTimeValueChangeProp;
    $[8] = timeValue;
    $[9] = t6;
  } else {
    t6 = $[9];
  }
  let t7;
  if ($[10] !== timeValue) {
    t7 = [timeValue];
    $[10] = timeValue;
    $[11] = t7;
  } else {
    t7 = $[11];
  }
  useAsyncEffect(t6, t7);
  let t8;
  if ($[12] !== onDateValueChangeProp) {
    t8 = newDate => updateDateValue(setDateValue, onDateValueChangeProp, newDate);
    $[12] = onDateValueChangeProp;
    $[13] = t8;
  } else {
    t8 = $[13];
  }
  const onDateValueChange = __name(t8, "onDateValueChange");
  let t9;
  if ($[14] !== onOpenChange) {
    t9 = () => ({
      open: __name(() => onDatePickerOpenChange(true, setIsOpen, onOpenChange), "open")
    });
    $[14] = onOpenChange;
    $[15] = t9;
  } else {
    t9 = $[15];
  }
  useImperativeHandle(ref, t9);
  let t10;
  if ($[16] !== onOpenChange) {
    t10 = open => onDatePickerOpenChange(open, setIsOpen, onOpenChange);
    $[16] = onOpenChange;
    $[17] = t10;
  } else {
    t10 = $[17];
  }
  return jsxs("div", {
    className: cn("text-secondary relative flex w-full gap-1", className),
    children: [jsxs(Popover.Root, {
      modal: true,
      open: isOpen && !disabled && !readOnly,
      onOpenChange: t10,
      children: [jsx(Popover.Trigger, {
        asChild: true,
        children: jsx(DatePickerTrigger, {
          label,
          skipAnimationOnce,
          dateValue,
          shouldLabelAnimate,
          disabled,
          readOnly,
          hovered,
          setIsHovered: setHovered,
          onReset: event => onDateResetHandler(event, onDateValueChange, setTimeValue, onDateValueChangeProp),
          variant,
          labelProp,
          showFullLabel
        })
      }), jsx(Popover.Portal, {
        children: jsx(Popover.Content, {
          className: "bg-background text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 mt-1 w-auto rounded-md border p-4 shadow-md outline-none",
          align: "center",
          children: jsx(Calendar, {
            id: inputId,
            mode: "single",
            selected: dateValue,
            captionLayout: calendarCaptionLayout.dropdown,
            onSelect: newDate_0 => onDateChangeHandler(timeValue, onDateValueChange, enableTime, newDate_0, onDateValueChangeProp),
            autoFocus: true,
            className: "text-secondary"
          })
        })
      })]
    }), enableTime && jsx(DatePickerTimeInputs, {
      timeValue,
      onTimeUpdate: (timeUnits, newValue) => onTimeValueChange(timeUnits, newValue, timeValue, setTimeValue, onDateValueChangeProp, onTimeValueChangeProp, dateValue),
      onDateValueChange,
      dateValue,
      disabled,
      readOnly
    })]
  });
}
__name(DatePicker, "DatePicker");
function DatePickerTrigger({
  label,
  skipAnimationOnce,
  dateValue,
  shouldLabelAnimate,
  disabled,
  readOnly,
  hovered,
  setIsHovered,
  onReset,
  variant,
  labelProp,
  showFullLabel
}) {
  return /* @__PURE__ */jsxs("div", {
    className: "w-full",
    children: [label && /* @__PURE__ */jsx("div", {
      className: cn("relative z-10 transition-opacity duration-300", dateValue ? "opacity-100" : "opacity-0"),
      children: /* @__PURE__ */jsx(LabelAnimation, {
        variant: "float",
        label,
        shouldAnimate: shouldLabelAnimate ?? true,
        skipAnimationOnce
      })
    }, Number(skipAnimationOnce)), /* @__PURE__ */jsx(Tooltip.Provider, {
      children: /* @__PURE__ */jsxs(Tooltip.Root, {
        children: [/* @__PURE__ */jsx(Tooltip.Trigger, {
          className: "w-full",
          render: props => /* @__PURE__ */jsxs("div", {
            ...props,
            className: "border-input hover:bg-background relative w-full",
            onMouseEnter: () => setIsHovered(true),
            onMouseLeave: () => setIsHovered(false),
            style: {
              cursor: disabled ? "not-allowed" : "default"
            },
            children: [/* @__PURE__ */jsx(Button, {
              onClick: onReset,
              variant: "icon",
              className: cn("peer absolute top-1/2 right-2.5 size-4 -translate-y-1/2 p-0", !!dateValue && hovered && !disabled && !readOnly ? "animate-fade-in" : "animate-fade-out"),
              onMouseEnter: () => setIsHovered(true),
              children: /* @__PURE__ */jsx(Icon, {
                name: iconNames.cross,
                size: iconSizes.small
              })
            }), /* @__PURE__ */jsxs(Button, {
              variant: variant ?? "float",
              className: "peer-hover:bg-accent peer-hover:text-accent-foreground w-full justify-start gap-2 hover:disabled:cursor-not-allowed",
              disabled,
              children: [/* @__PURE__ */jsx(Icon, {
                name: iconNames.calendar,
                className: "mr-2"
              }), /* @__PURE__ */jsx("span", {
                className: "text-muted-foreground mr-1",
                children: localizedFormat(label, dateValue ?? void 0)
              })]
            })]
          })
        }), /* @__PURE__ */jsx(Tooltip.Portal, {
          hidden: showFullLabel,
          children: /* @__PURE__ */jsx(Tooltip.Positioner, {
            children: /* @__PURE__ */jsx("p", {
              className: "bg-popover mb-1.5 rounded-md border px-3 py-1.5 text-sm shadow-md",
              children: labelProp ?? ""
            })
          })
        })]
      })
    })]
  });
}
__name(DatePickerTrigger, "DatePickerTrigger");
function DatePickerTimeInputs({
  timeValue,
  onTimeUpdate,
  onDateValueChange,
  dateValue,
  disabled,
  readOnly
}) {
  return /* @__PURE__ */jsxs("div", {
    className: "text-primary flex",
    children: [/* @__PURE__ */jsx(Input, {
      showClearIcon: false,
      min: "0",
      max: "23",
      type: "number",
      className: "w-14",
      value: timeValue.hours.toString() ?? "",
      onChange: hoursValue => updateHours(parseInt(hoursValue), timeValue, onTimeUpdate, onDateValueChange, dateValue),
      disabled,
      readOnly
    }), /* @__PURE__ */jsx("span", {
      className: "text-lg",
      children: ":"
    }), /* @__PURE__ */jsx(Input, {
      showClearIcon: false,
      min: "0",
      max: "59",
      type: "number",
      className: "w-14",
      value: timeValue.minutes.toString() ?? "",
      onChange: minutesValue => updateMinutes(parseInt(minutesValue), timeValue, onTimeUpdate, onDateValueChange, dateValue),
      disabled,
      readOnly
    })]
  });
}
__name(DatePickerTimeInputs, "DatePickerTimeInputs");

export { DatePicker };
