import { defineComponent, ref, computed, watch, openBlock, createBlock, unref, createSlots, withCtx, createElementVNode, normalizeClass, withModifiers, createVNode, createElementBlock, toDisplayString, Fragment, renderList, createTextVNode, createCommentVNode } from "vue";
import Input from "../common/base/Input/index.mjs";
import Checkbox from "../common/base/Checkbox/index.mjs";
import TuiButton from "../common/base/Button.vue.mjs";
import Avatar from "../common/Avatar.vue.mjs";
import SearchIcon from "../common/icons/SearchIcon.vue.mjs";
import CloseIcon from "../common/icons/CloseIcon.vue.mjs";
import PanelContainer from "./PanelContainer.vue.mjs";
import { useI18n } from "../../locales/index.mjs";
const _hoisted_1 = { class: "contact" };
const _hoisted_2 = { class: "contact-search" };
const _hoisted_3 = { class: "contact-list" };
const _hoisted_4 = {
  key: 0,
  class: "no-result"
};
const _hoisted_5 = { class: "contact-list-item-checkbox-container" };
const _hoisted_6 = ["title"];
const _hoisted_7 = {
  key: 0,
  class: "chosen"
};
const _hoisted_8 = { class: "chosen-title" };
const _hoisted_9 = { class: "chosen-list" };
const _hoisted_10 = ["title"];
const _hoisted_11 = { class: "chosen-footer" };
const _hoisted_12 = { class: "contact-footer" };
const _hoisted_13 = { class: "chosen-member" };
const _hoisted_14 = { key: 0 };
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "Contacts",
  props: {
    visible: { type: Boolean },
    contacts: {},
    selectedList: {},
    isMobile: { type: Boolean, default: false },
    disabledList: {}
  },
  emits: ["input", "confirm"],
  setup(__props, { emit: __emit }) {
    const { t } = useI18n();
    const props = __props;
    const emit = __emit;
    const isDialogVisible = ref(false);
    const searchValue = ref("");
    const updateContacts = () => {
      contacts.value = props.contacts.map((user) => {
        var _a, _b;
        const index = (_a = props.selectedList) == null ? void 0 : _a.findIndex(
          (selectedUser) => selectedUser.userId === user.userID
        );
        const disableUserIndex = (_b = props.disabledList) == null ? void 0 : _b.findIndex(
          (disableUser) => disableUser.userId === user.userID
        );
        return {
          selected: index !== void 0 && index !== -1,
          disabled: disableUserIndex !== void 0 && disableUserIndex !== -1,
          userInfo: user
        };
      });
    };
    const updateVisible = (val) => {
      updateContacts();
      emit("input", val);
    };
    const contacts = ref(
      props.contacts.map((user) => {
        var _a, _b;
        const index = (_a = props.selectedList) == null ? void 0 : _a.findIndex(
          (selectedUser) => selectedUser.userId === user.userID
        );
        const disableUserIndex = (_b = props.disabledList) == null ? void 0 : _b.findIndex(
          (disabledUser) => disabledUser.userId === user.userID
        );
        return {
          selected: !!index && index !== -1,
          disabled: !!disableUserIndex && disableUserIndex !== -1,
          userInfo: user
        };
      })
    );
    const selectedContacts = computed(
      () => contacts.value.filter((user) => user.selected)
    );
    const searchResult = ref([]);
    const showList = computed(
      () => searchValue.value ? searchResult.value : contacts.value
    );
    const searchContact = (v) => {
      if (!v) return [];
      searchResult.value = contacts.value.filter(
        (item) => item.userInfo.profile.nick.includes(v) || item.userInfo.userID.includes(v)
      );
    };
    const removeSelectUser = (user) => {
      const index = contacts.value.findIndex(
        (item) => user.userInfo.userID === item.userInfo.userID
      );
      contacts.value[index].selected = false;
    };
    const confirm = () => {
      emit(
        "confirm",
        selectedContacts.value.map((item) => {
          const { userID, profile } = item.userInfo;
          return {
            userId: userID,
            userName: profile.nick,
            avatarUrl: profile.avatar
          };
        })
      );
      updateVisible(false);
    };
    const cancel = () => {
      updateVisible(false);
    };
    watch(
      () => props.visible,
      (val) => {
        isDialogVisible.value = val;
      },
      {
        immediate: true
      }
    );
    watch(
      isDialogVisible,
      (val) => {
        searchValue.value = "";
        updateVisible(val);
      },
      { immediate: true }
    );
    return (_ctx, _cache) => {
      return openBlock(), createBlock(PanelContainer, {
        visible: isDialogVisible.value,
        title: unref(t)("Contacts"),
        onInput: _cache[5] || (_cache[5] = ($event) => isDialogVisible.value = $event)
      }, createSlots({
        default: withCtx(() => [
          createElementVNode("div", {
            class: normalizeClass(["contacts-container", props.isMobile && "h5"]),
            onClick: _cache[4] || (_cache[4] = withModifiers(() => {
            }, ["stop"]))
          }, [
            createElementVNode("div", _hoisted_1, [
              createElementVNode("div", _hoisted_2, [
                createVNode(unref(Input), {
                  modelValue: searchValue.value,
                  "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => searchValue.value = $event),
                  class: "contact-search-input",
                  placeholder: unref(t)("Please enter the member name"),
                  search: searchContact,
                  onFocus: _cache[2] || (_cache[2] = (element) => {
                    element.classList.add("focus");
                  }),
                  onBlur: _cache[3] || (_cache[3] = (element) => {
                    element.classList.remove("focus");
                  })
                }, {
                  suffixIcon: withCtx(() => [
                    createVNode(SearchIcon, {
                      class: "search-icon",
                      onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {
                      }, ["prevent"]))
                    })
                  ]),
                  _: 1
                }, 8, ["modelValue", "placeholder"])
              ]),
              createElementVNode("div", _hoisted_3, [
                showList.value.length === 0 && searchValue.value ? (openBlock(), createElementBlock("div", _hoisted_4, toDisplayString(unref(t)("No relevant members found")), 1)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(showList.value, (item) => {
                  return openBlock(), createElementBlock("div", {
                    key: item.userInfo.userID,
                    class: normalizeClass([
                      "contact-list-item",
                      item.disabled && "contact-list-item-disabled"
                    ])
                  }, [
                    createVNode(unref(Checkbox), {
                      "model-value": item.selected,
                      disabled: item.disabled,
                      class: "contact-list-item-checkbox",
                      onInput: ($event) => item.selected = $event
                    }, {
                      default: withCtx(() => [
                        createElementVNode("span", _hoisted_5, [
                          createVNode(Avatar, {
                            class: "contact-list-item-avatar",
                            "img-src": item.userInfo.profile.avatar
                          }, null, 8, ["img-src"]),
                          createElementVNode("p", {
                            class: "contact-list-item-name",
                            title: item.userInfo.profile.nick
                          }, toDisplayString(item.userInfo.profile.nick || item.userInfo.profile.userID), 9, _hoisted_6)
                        ])
                      ]),
                      _: 2
                    }, 1032, ["model-value", "disabled", "onInput"])
                  ], 2);
                }), 128))
              ])
            ]),
            !props.isMobile ? (openBlock(), createElementBlock("div", _hoisted_7, [
              createElementVNode("div", _hoisted_8, toDisplayString(unref(t)(`Selected Contact`) + `(${selectedContacts.value.length})`), 1),
              createElementVNode("div", _hoisted_9, [
                (openBlock(true), createElementBlock(Fragment, null, renderList(selectedContacts.value, (item) => {
                  return openBlock(), createElementBlock("div", {
                    key: item.userInfo.userID,
                    class: "chosen-list-item"
                  }, [
                    createVNode(Avatar, {
                      class: "chosen-list-item-avatar",
                      "img-src": item.userInfo.profile.avatar
                    }, null, 8, ["img-src"]),
                    createElementVNode("p", {
                      class: "chosen-list-item-name",
                      title: item.userInfo.profile.nick
                    }, toDisplayString(item.userInfo.profile.nick || item.userInfo.profile.userID), 9, _hoisted_10),
                    createVNode(CloseIcon, {
                      class: "chosen-list-item-remove",
                      onClick: ($event) => removeSelectUser(item)
                    }, null, 8, ["onClick"])
                  ]);
                }), 128))
              ]),
              createElementVNode("div", _hoisted_11, [
                createVNode(TuiButton, {
                  class: "chosen-footer-button",
                  type: "primary",
                  onClick: cancel
                }, {
                  default: withCtx(() => [
                    createTextVNode(toDisplayString(unref(t)("Cancel")), 1)
                  ]),
                  _: 1
                }),
                createVNode(TuiButton, {
                  class: "chosen-footer-button",
                  onClick: confirm
                }, {
                  default: withCtx(() => [
                    createTextVNode(toDisplayString(unref(t)("Confirm")), 1)
                  ]),
                  _: 1
                })
              ])
            ])) : createCommentVNode("", true)
          ], 2)
        ]),
        _: 2
      }, [
        props.isMobile ? {
          name: "footer",
          fn: withCtx(() => [
            createElementVNode("div", _hoisted_12, [
              createElementVNode("div", _hoisted_13, [
                selectedContacts.value.length ? (openBlock(), createElementBlock("span", _hoisted_14, toDisplayString(unref(t)("x people selected", { number: selectedContacts.value.length })), 1)) : createCommentVNode("", true)
              ]),
              createVNode(TuiButton, {
                disabled: !selectedContacts.value.length,
                onClick: confirm
              }, {
                default: withCtx(() => [
                  createTextVNode(toDisplayString(unref(t)("Confirm") + `(${selectedContacts.value.length})`), 1)
                ]),
                _: 1
              }, 8, ["disabled"])
            ])
          ]),
          key: "0"
        } : void 0
      ]), 1032, ["visible", "title"]);
    };
  }
});
export {
  _sfc_main as default
};
