import { jsxs, jsx } from "react/jsx-runtime";
import { Dialog, Modal, Select, Button } from "@choiceform/design-system";
import { ThumbUp, ThumbDown } from "@choiceform/icons-react";
import { observer, use$ as useSelector } from "../../_vendor/@legendapp/state/react.js";
import { useState } from "react";
import { useEventCallback } from "../../_vendor/usehooks-ts/dist-index.js";
import { t } from "../../i18n/index.js";
import { ratingStore$, ratingActions } from "../../stores/rating-store.js";
const FeedbackDialog = observer(function FeedbackDialog2(props) {
  const { onSubmit } = props;
  const feedbackDialog = useSelector(ratingStore$.feedbackDialog);
  const rating = feedbackDialog.rating || "positive";
  const [reason, setReason] = useState("");
  const [additionalFeedback, setAdditionalFeedback] = useState("");
  const reasonsList = rating === "positive" ? t("dialog", "additional-feedback-positive-reasons") : t("dialog", "additional-feedback-negative-reasons");
  const reasons = reasonsList.split(",").map((s) => s.trim()).filter((s) => s.length > 0).map((s) => ({ value: s, label: s }));
  const icon = rating === "positive" ? /* @__PURE__ */ jsx(ThumbUp, {}) : /* @__PURE__ */ jsx(ThumbDown, {});
  const reasonTitle = t("dialog", "reason-title");
  const reasonPlaceholder = t("dialog", "reason-placeholder");
  const additionalFeedbackTitle = t("dialog", "additional-feedback-title");
  const additionalFeedbackPlaceholder = t("dialog", "additional-feedback-placeholder");
  const title = t("dialog", "title");
  const cancel = t("common", "cancel");
  const submit = t("common", "submit");
  const handleSubmit = useEventCallback(() => {
    onSubmit?.({
      rating,
      reason: reason || void 0,
      additionalFeedback: additionalFeedback.trim() || void 0
    });
    handleClose();
  });
  const handleClose = useEventCallback(() => {
    setReason("");
    setAdditionalFeedback("");
    ratingActions.closeFeedbackDialog();
  });
  if (!feedbackDialog.isOpen) return null;
  return /* @__PURE__ */ jsxs(
    Dialog,
    {
      open: feedbackDialog.isOpen,
      onOpenChange: () => ratingActions.closeFeedbackDialog(),
      children: [
        /* @__PURE__ */ jsx(
          Dialog.Header,
          {
            title: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
              icon,
              /* @__PURE__ */ jsx("span", { children: title })
            ] }),
            onClose: handleClose
          }
        ),
        /* @__PURE__ */ jsxs(Dialog.Content, { className: "w-md space-y-4 p-4", children: [
          /* @__PURE__ */ jsxs(
            Modal.Select,
            {
              label: reasonTitle,
              value: reason,
              onChange: (value) => setReason(value),
              children: [
                /* @__PURE__ */ jsx(Select.Trigger, { children: /* @__PURE__ */ jsx(Select.Value, { children: reasons.find((option) => option.value === reason)?.label || reasonPlaceholder }) }),
                /* @__PURE__ */ jsx(Select.Content, { children: reasons.map((option) => /* @__PURE__ */ jsx(
                  Select.Item,
                  {
                    value: option.value,
                    children: option.label
                  },
                  option.value
                )) })
              ]
            }
          ),
          /* @__PURE__ */ jsx(
            Modal.Textarea,
            {
              label: additionalFeedbackTitle,
              value: additionalFeedback,
              onChange: (value) => setAdditionalFeedback(value),
              placeholder: additionalFeedbackPlaceholder
            }
          )
        ] }),
        /* @__PURE__ */ jsxs(Dialog.Footer, { className: "flex justify-end gap-2", children: [
          /* @__PURE__ */ jsx(
            Button,
            {
              variant: "secondary",
              onClick: handleClose,
              children: cancel
            }
          ),
          /* @__PURE__ */ jsx(
            Button,
            {
              onClick: handleSubmit,
              disabled: !reason,
              children: submit
            }
          )
        ] })
      ]
    }
  );
});
export {
  FeedbackDialog
};
//# sourceMappingURL=feedback-dialog.js.map
