import {
  OnOfflineRadioCard
} from "./chunk-OP4JHB3C.js";
import {
  DatePickerButton
} from "./chunk-RKUJ6UVN.js";
import {
  TimeSelect
} from "./chunk-5VWEW4M2.js";
import {
  getTimeOption,
  parseTimeOption
} from "./chunk-NWJSLIQ3.js";
import {
  Form
} from "./chunk-BGPMDQGB.js";
import {
  toast
} from "./chunk-26ZU5KUR.js";
import {
  Inset
} from "./chunk-XQOL7UBI.js";
import {
  BulletText
} from "./chunk-I7UUXACJ.js";
import {
  Card
} from "./chunk-HEDMSFPW.js";
import {
  Grid
} from "./chunk-EGEQY3KT.js";
import {
  Badge
} from "./chunk-FCIHNIOH.js";
import {
  Typo
} from "./chunk-PARGQUJB.js";
import {
  Heading
} from "./chunk-34OQDUQR.js";
import {
  Box
} from "./chunk-4Y5BEXVN.js";
import {
  Button
} from "./chunk-AFPH32MF.js";
import {
  Flex
} from "./chunk-25HMMI7R.js";
import {
  ArrowRightIcon,
  Cross1Icon
} from "./chunk-V5XKNSCK.js";
import {
  __spreadProps,
  __spreadValues
} from "./chunk-2NMEKWO5.js";

// src/app/platform/reservation-card.tsx
import { useCallback, useEffect, useMemo, useState } from "react";
import { setHours, setMinutes } from "date-fns";
import { jsx, jsxs } from "react/jsx-runtime";
function ReservationCard(props) {
  const {
    sessionNumber,
    customerName,
    readonly,
    defaultTime,
    defaultType,
    error,
    minTime,
    maxTime,
    onClickReserve,
    onClickCancel,
    onClickCompleteSession
  } = props;
  const [editValues, setEditValues] = useState({
    date: props.defaultTime,
    type: props.defaultType
  });
  const date = readonly ? defaultTime : editValues.date;
  const type = readonly ? defaultType : editValues.type;
  const time = date && getTimeOption(date);
  const onClickSave = useCallback(() => {
    var _a;
    (_a = props.onClickSave) == null ? void 0 : _a.call(props, editValues);
  }, [editValues, props]);
  const onClickReset = useCallback(() => {
    setEditValues({
      date: defaultTime,
      type: defaultType
    });
  }, [defaultTime, defaultType]);
  const ActionButtons = useMemo(() => {
    if (readonly) {
      return /* @__PURE__ */ jsx(Button, { onClick: onClickReserve, size: "small", variant: "surface", children: defaultTime && defaultType ? "\uC608\uC57D \uC218\uC815\uD558\uAE30" : "\uC608\uC57D\uD558\uAE30" });
    }
    return /* @__PURE__ */ jsx(Button, { color: "gray", onClick: onClickCancel, variant: "transparent", children: /* @__PURE__ */ jsx(Cross1Icon, {}) });
  }, [defaultTime, defaultType, onClickCancel, onClickReserve, readonly]);
  const onChangeDate = useCallback(
    (newDate) => {
      if (!newDate) return;
      const { hour = 0, minute = 0 } = time ? parseTimeOption(time) : {};
      setEditValues((prev) => {
        return __spreadProps(__spreadValues({}, prev), {
          date: setMinutes(setHours(newDate, hour), minute)
        });
      });
    },
    [time]
  );
  const onChangeType = useCallback((newType) => {
    setEditValues((prev) => {
      return __spreadProps(__spreadValues({}, prev), {
        type: newType
      });
    });
  }, []);
  const onChangeTime = useCallback(
    (v) => {
      const { hour, minute } = parseTimeOption(v);
      if (typeof v === "undefined") {
        setEditValues((prev) => {
          return __spreadProps(__spreadValues({}, prev), {
            date: v
          });
        });
      }
      setEditValues((prev) => {
        return __spreadProps(__spreadValues({}, prev), {
          date: setMinutes(setHours(date || /* @__PURE__ */ new Date(), hour), minute)
        });
      });
    },
    [date]
  );
  useEffect(() => {
    if (!minTime || !editValues.date || readonly) return;
    if (editValues.date < minTime) {
      toast.warn("\uC120\uD0DD \uAC00\uB2A5\uD55C \uC2DC\uAC04\uB300\uB85C \uBCC0\uACBD\uB418\uC5C8\uC2B5\uB2C8\uB2E4.");
      setEditValues((prev) => {
        return __spreadProps(__spreadValues({}, prev), {
          date: minTime
        });
      });
    }
  }, [editValues, minTime, readonly]);
  useEffect(() => {
    if (!maxTime || !editValues.date || readonly) return;
    if (editValues.date > maxTime) {
      toast.warn("\uC120\uD0DD \uAC00\uB2A5\uD55C \uC2DC\uAC04\uB300\uB85C \uBCC0\uACBD\uB418\uC5C8\uC2B5\uB2C8\uB2E4.");
      setEditValues((prev) => {
        return __spreadProps(__spreadValues({}, prev), {
          date: maxTime
        });
      });
    }
  }, [editValues, maxTime, readonly]);
  return /* @__PURE__ */ jsxs(
    Card,
    {
      error: Boolean(error),
      size: "3",
      style: { overflow: "visible", contain: "initial" },
      children: [
        /* @__PURE__ */ jsxs(Flex, { gap: "3", justify: "between", mb: "5", children: [
          /* @__PURE__ */ jsxs(
            Grid,
            {
              align: "center",
              columns: { initial: "1", xs: "auto 1fr" },
              gapY: "2",
              children: [
                /* @__PURE__ */ jsxs(Flex, { align: "center", children: [
                  /* @__PURE__ */ jsxs(Heading, { variant: "heading4", children: [
                    customerName || "-",
                    "\uB2D8 ",
                    sessionNumber || "-",
                    "\uD68C\uCC28 \uC138\uC158"
                  ] }),
                  /* @__PURE__ */ jsx(Badge, { ml: "2", children: "\uB2E4\uC74C \uC138\uC158" })
                ] }),
                error ? /* @__PURE__ */ jsx(BulletText, { color: "red", variant: "caption", children: error }) : null
              ]
            }
          ),
          /* @__PURE__ */ jsx(Flex, { children: ActionButtons })
        ] }),
        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
          Form.Root,
          {
            onSubmit: (e) => {
              e.preventDefault();
            },
            children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "5", children: [
              /* @__PURE__ */ jsx(Form.Field, { name: "date", children: /* @__PURE__ */ jsxs(Form.Label, { asChild: true, children: [
                /* @__PURE__ */ jsx(Heading, { mb: "2", variant: "heading5", weight: "regular", children: "\uC138\uC158 \uC77C\uC790\uC640 \uC2DC\uAC01" }),
                /* @__PURE__ */ jsxs(Grid, { columns: "1fr auto", gap: "4", children: [
                  /* @__PURE__ */ jsx(
                    DatePickerButton,
                    {
                      disabled: readonly,
                      maxDate: maxTime,
                      minDate: minTime,
                      onChange: onChangeDate,
                      placeholder: "\uC77C\uC790\uB97C \uC120\uD0DD\uD574\uC8FC\uC138\uC694",
                      selected: date,
                      size: "large"
                    }
                  ),
                  /* @__PURE__ */ jsx(
                    TimeSelect,
                    {
                      disabled: readonly,
                      maxTime,
                      minTime,
                      onValueChange: onChangeTime,
                      size: "3",
                      time: date,
                      value: time
                    }
                  )
                ] })
              ] }) }),
              /* @__PURE__ */ jsxs(Form.Field, { name: "type", children: [
                /* @__PURE__ */ jsx(Form.Label, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { mb: "2", variant: "heading5", weight: "regular", children: "\uC628/\uC624\uD504\uB77C\uC778 \uC9C4\uD589 \uC5EC\uBD80" }) }),
                /* @__PURE__ */ jsx(Form.Control, { asChild: true, children: /* @__PURE__ */ jsx(
                  OnOfflineRadioCard,
                  {
                    disabled: readonly,
                    onValueChange: onChangeType,
                    size: "1",
                    value: type
                  }
                ) })
              ] }),
              readonly ? null : /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "3", justify: "end", children: [
                /* @__PURE__ */ jsx(
                  Button,
                  {
                    color: "gray",
                    onClick: onClickReset,
                    size: "small",
                    variant: "transparent",
                    children: "\uCD08\uAE30\uD654\uD558\uAE30"
                  }
                ),
                /* @__PURE__ */ jsx(Button, { onClick: onClickSave, size: "small", children: "\uC800\uC7A5\uD558\uAE30" })
              ] })
            ] })
          }
        ) }),
        readonly ? /* @__PURE__ */ jsx(Inset, { clip: "border-box", side: "bottom", children: /* @__PURE__ */ jsx(
          Box,
          {
            mt: "5",
            px: "5",
            py: "4",
            style: { backgroundColor: "var(--accent-a3)" },
            width: "100%",
            children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "4", justify: "center", children: [
              /* @__PURE__ */ jsxs(Typo, { children: [
                sessionNumber || "-",
                "\uD68C\uCC28 \uC138\uC158\uC744 \uC644\uB8CC\uD558\uC168\uB098\uC694?"
              ] }),
              /* @__PURE__ */ jsxs(Button, { onClick: onClickCompleteSession, size: "small", children: [
                "\uC138\uC158 \uC885\uB8CC\uD558\uAE30",
                /* @__PURE__ */ jsx(ArrowRightIcon, {})
              ] })
            ] })
          }
        ) }) : null
      ]
    }
  );
}

export {
  ReservationCard
};
//# sourceMappingURL=chunk-GTMW76NP.js.map