import {
  DatePicker
} from "./chunk-UNX424VR.js";
import {
  TextField
} from "./chunk-6NPTJBFE.js";
import {
  Button
} from "./chunk-ZVDAEY5Q.js";
import {
  Box
} from "./chunk-4Y5BEXVN.js";
import {
  CalendarIcon
} from "./chunk-V5XKNSCK.js";
import {
  __objRest,
  __spreadProps,
  __spreadValues
} from "./chunk-CRTRMMJ7.js";

// src/molecules/date-picker/date-picker-button.tsx
import { useMemo } from "react";
import { format } from "date-fns";
import { clsx } from "clsx";
import { jsx, jsxs } from "react/jsx-runtime";
function DatePickerButton(props) {
  const _a = props, { size, format: formatProps, disabled } = _a, rest = __objRest(_a, ["size", "format", "disabled"]);
  const placeholder = rest.placeholder || "\uB0A0\uC9DC\uB97C \uC120\uD0DD\uD574\uC8FC\uC138\uC694";
  const buttonProps = useMemo(() => {
    const variant = "outline";
    const color = "gray";
    return { size, color, variant, disabled };
  }, [disabled, size]);
  const selectFormat = useMemo(() => {
    if (formatProps) return formatProps;
    return (date) => {
      return date ? format(date, "yyyy\uB144 MM\uC6D4 dd\uC77C") : "";
    };
  }, [formatProps]);
  const className = useMemo(() => {
    return clsx(
      "date-picker-button",
      (disabled || props.readOnly) && "disabled"
    );
  }, [disabled, props.readOnly]);
  const placeholderVisible = useMemo(() => {
    return rest.selected ? "" : "placeholder-visible";
  }, [rest.selected]);
  return /* @__PURE__ */ jsx(Box, { p: "0", width: "100%", children: /* @__PURE__ */ jsx(
    DatePicker,
    __spreadProps(__spreadValues({
      customInput: /* @__PURE__ */ jsx(Button, __spreadProps(__spreadValues({ asChild: true, className, type: "button" }, buttonProps), { children: /* @__PURE__ */ jsxs(
        TextField.Root,
        {
          className: placeholderVisible,
          placeholder: placeholder || "",
          value: rest.selected ? selectFormat(rest.selected) : placeholder,
          children: [
            /* @__PURE__ */ jsx(TextField.Slot, { className: "hide-slot" }),
            /* @__PURE__ */ jsx(TextField.Slot, { children: /* @__PURE__ */ jsx(CalendarIcon, {}) })
          ]
        }
      ) })),
      wrapperClassName: "full-width"
    }, rest), {
      disabled
    })
  ) });
}

export {
  DatePickerButton
};
//# sourceMappingURL=chunk-5X3ISCC4.js.map