import { jsxs, Fragment, jsx } from "react/jsx-runtime";
import { useState } from "react";
/* empty css                                     */
import { Button } from "../../../../Button/index.js";
import { Checkbox } from "../../../../Checkbox/index.js";
import { Prompt } from "../../../../Prompt/index.js";
import { RadioButtonGroup } from "../../../../RadioButtonGroup/index.js";
const ChatNotificationSettings = ({
  isOpen,
  onClose,
  isLoading,
  position = { top: 60, right: 32 },
  onSaveNotification,
  notificationSettings
}) => {
  const [notificationSetting, setNotificationSetting] = useState(
    (notificationSettings == null ? void 0 : notificationSettings.notificationSetting) || "all"
  );
  const [includeChannelMentions, setIncludeChannelMentions] = useState(
    (notificationSettings == null ? void 0 : notificationSettings.includeChannelMentions) || false
  );
  const [muteChannel, setMuteChannel] = useState((notificationSettings == null ? void 0 : notificationSettings.muteChannel) || false);
  const channelName = (notificationSettings == null ? void 0 : notificationSettings.channelName) || "general";
  const handleSave = () => {
    onSaveNotification({
      notificationSetting,
      includeChannelMentions,
      muteChannel
    });
    onClose();
  };
  const handleCancel = () => {
    onClose();
  };
  if (!isOpen) return null;
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx("div", { className: "notification-backdrop", onClick: onClose }),
    /* @__PURE__ */ jsxs(
      "div",
      {
        className: "notification-settings-card",
        style: {
          position: "absolute",
          top: position.top,
          right: position.right,
          transform: "translate(0%, 0%)"
        },
        children: [
          /* @__PURE__ */ jsx("div", { className: "notification-settings-header", children: /* @__PURE__ */ jsx("h3", { children: "Send a notification for" }) }),
          /* @__PURE__ */ jsxs("div", { className: "notification-settings-content", children: [
            /* @__PURE__ */ jsxs("div", { className: "notification-options", children: [
              /* @__PURE__ */ jsx(
                RadioButtonGroup,
                {
                  options: [
                    {
                      label: "All new messages",
                      value: "all"
                    }
                  ],
                  value: notificationSetting,
                  onChange: (_e, val) => {
                    setNotificationSetting(val);
                  }
                }
              ),
              /* @__PURE__ */ jsx(
                RadioButtonGroup,
                {
                  options: [
                    {
                      label: "Mentions",
                      value: "mentions"
                    }
                  ],
                  value: notificationSetting,
                  onChange: (_e, val) => {
                    setIncludeChannelMentions(false);
                    setMuteChannel(false);
                    setNotificationSetting(val);
                  }
                }
              ),
              notificationSetting === "mentions" && /* @__PURE__ */ jsx("div", { className: "mentions-checkbox", children: /* @__PURE__ */ jsx(
                Checkbox,
                {
                  checked: includeChannelMentions,
                  label: /* @__PURE__ */ jsxs("span", { children: [
                    "Also include ",
                    /* @__PURE__ */ jsx("b", { style: { fontWeight: "bold" }, children: `@${channelName}` }),
                    " and",
                    " ",
                    /* @__PURE__ */ jsx("b", { style: { fontWeight: "bold" }, children: `@here` })
                  ] }),
                  variant: "default",
                  onChange: (e) => {
                    setIncludeChannelMentions(e.target.checked);
                  }
                }
              ) }),
              /* @__PURE__ */ jsx(
                RadioButtonGroup,
                {
                  options: [
                    {
                      label: "Nothing",
                      value: "nothing"
                    }
                  ],
                  value: notificationSetting,
                  onChange: (_e, val) => {
                    setNotificationSetting(val);
                    setIncludeChannelMentions(false);
                    setMuteChannel(false);
                  }
                }
              )
            ] }),
            /* @__PURE__ */ jsx("div", { className: "notification-separator" }),
            /* @__PURE__ */ jsxs("div", { className: "mute-section", children: [
              /* @__PURE__ */ jsx(
                Checkbox,
                {
                  checked: muteChannel,
                  label: "Mute channel",
                  variant: "default",
                  onChange: (e) => {
                    setMuteChannel(e.target.checked);
                    setIncludeChannelMentions(false);
                    setNotificationSetting("nothing");
                  }
                }
              ),
              /* @__PURE__ */ jsx(
                Prompt,
                {
                  handleClose: () => {
                    setMuteChannel(false);
                  },
                  isOpen: muteChannel,
                  secondaryButtonLabel: "Unmute channel",
                  title: "You've muted this channel",
                  variant: "warning",
                  onSecondaryButtonClick: () => {
                    setMuteChannel(false);
                  },
                  children: "Muted channels are greyed out at the bottom of your channel list. You’ll still see a badge in the sidebar if you’ve been mentioned."
                }
              ),
              /* @__PURE__ */ jsxs("div", { className: "mute-description", children: [
                /* @__PURE__ */ jsx("p", { children: "Mute channels are greyed out at the bottom of your channel list." }),
                /* @__PURE__ */ jsx("p", { children: "You'll still see a badge in the sidebar if you've been mentioned." })
              ] })
            ] })
          ] }),
          /* @__PURE__ */ jsxs("div", { className: "notification-settings-actions", children: [
            /* @__PURE__ */ jsx(Button, { className: "cancel-button", variant: "url", onClick: handleCancel, children: "Cancel" }),
            /* @__PURE__ */ jsx(Button, { disabled: isLoading, variant: "primary", onClick: handleSave, children: isLoading ? "Saving..." : "Save changes" })
          ] })
        ]
      }
    )
  ] });
};
export {
  ChatNotificationSettings
};
