import { jsx, jsxs, Fragment } from "react/jsx-runtime";
import { useRef, useEffect } from "react";
import { useForm, Controller } from "react-hook-form";
import { Button } from "../../../../Button/index.js";
import { Input } from "../../../../Input/index.js";
import { TextArea } from "../../../../TextArea/index.js";
/* empty css                             */
const validationRules = {
  chatName: {
    required: "Chat name is required",
    minLength: {
      value: 2,
      message: "Chat name must be at least 2 characters long"
    },
    maxLength: {
      value: 50,
      message: "Chat name cannot exceed 50 characters"
    }
    // pattern: {
    //   value: /^[a-zA-Z0-9\s\-_]+$/,
    //   message:
    //     "Chat name can only contain letters, numbers, spaces, hyphens, and underscores",
    // },
  },
  chatDescription: {
    maxLength: {
      value: 100,
      message: "Description cannot exceed 100 characters"
    }
  }
};
const AddChat = ({
  setShowAddChat,
  handleChatName,
  selectedChannelInfo,
  handleToast,
  setIsCreateNewChatOpen
}) => {
  const containerRef = useRef(null);
  const {
    control,
    handleSubmit,
    formState: { errors, isSubmitting, isValid },
    reset
  } = useForm({
    mode: "onSubmit",
    // Validate on change for real-time feedback
    defaultValues: {
      chatName: "",
      chatDescription: ""
    }
  });
  useEffect(() => {
    function handleClickOutside(event) {
      if (containerRef.current && !containerRef.current.contains(event.target)) {
        handleCancel();
      }
    }
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, []);
  const onSubmit = async (data) => {
    try {
      const response = await handleChatName(data, selectedChannelInfo);
      handleToast(true, "Chat saved successfully", "success");
      handleCancel();
    } catch (err) {
      console.error("Error while saving chat:", err);
      handleToast(true, "Error while saving chat", "error");
    }
  };
  const handleCancel = () => {
    reset();
    setShowAddChat(false);
    setIsCreateNewChatOpen(false);
  };
  return /* @__PURE__ */ jsx("div", { ref: containerRef, className: "addChat_container", children: /* @__PURE__ */ jsxs("form", { noValidate: true, className: "chatcontainer", onSubmit: handleSubmit(onSubmit), children: [
    /* @__PURE__ */ jsx(
      Controller,
      {
        control,
        name: "chatName",
        render: ({ field }) => {
          var _a;
          return /* @__PURE__ */ jsx(
            Input,
            {
              helperText: (_a = errors.chatName) == null ? void 0 : _a.message,
              isDisabled: isSubmitting,
              isError: !!errors.chatName,
              isHelperText: !!errors.chatName,
              label: "Chat name",
              name: field.name,
              placeholder: "Price negotiation",
              type: "text",
              value: field.value,
              onBlur: field.onBlur,
              onChange: field.onChange
            }
          );
        },
        rules: validationRules.chatName
      }
    ),
    /* @__PURE__ */ jsx(
      Controller,
      {
        control,
        name: "chatDescription",
        render: ({ field }) => {
          var _a;
          return /* @__PURE__ */ jsx(
            TextArea,
            {
              characterLimit: 100,
              height: "80px",
              isDisabled: isSubmitting,
              isError: !!errors.chatDescription,
              label: "Add description",
              maxRows: 2,
              name: field.name,
              placeholder: "Lets review the latest changes",
              secondaryLabel: (_a = errors.chatDescription) == null ? void 0 : _a.message,
              value: field.value || "",
              width: "100%",
              onBlur: field.onBlur,
              onChange: field.onChange
            }
          );
        },
        rules: validationRules.chatDescription
      }
    ),
    /* @__PURE__ */ jsxs("div", { className: "chatFooterContainer", children: [
      /* @__PURE__ */ jsx(
        Button,
        {
          disabled: isSubmitting,
          size: "large",
          type: "button",
          variant: "tertiary",
          onClick: handleCancel,
          children: "Cancel"
        }
      ),
      /* @__PURE__ */ jsx(
        Button,
        {
          className: "chat_save_btn",
          disabled: isSubmitting,
          size: "large",
          type: "submit",
          variant: "primary",
          children: isSubmitting ? /* @__PURE__ */ jsx(Fragment, { children: "Saving..." }) : "Save"
        }
      )
    ] })
  ] }) });
};
export {
  AddChat as default
};
