"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
const useRefs = require("../composables/use-refs.js");
const index$2 = require("../tab/index.js");
const index$1 = require("../tabs/index.js");
const index = require("../icon/index.js");
const props = require("../utils/props.js");
const create = require("../utils/create.js");
const basic = require("../utils/basic.js");
const constant = require("../utils/constant.js");
const [name, bem, t] = create.createNamespace("cascader");
const cascaderProps = {
  title: String,
  options: props.makeArrayProp(),
  closeable: props.truthProp,
  swipeable: props.truthProp,
  closeIcon: props.makeStringProp("cross"),
  showHeader: props.truthProp,
  modelValue: props.numericProp,
  fieldNames: Object,
  placeholder: String,
  activeColor: String
};
var stdin_default = Vue.defineComponent({
  name,
  props: cascaderProps,
  emits: ["close", "change", "finish", "clickTab", "update:modelValue"],
  setup(props2, {
    slots,
    emit
  }) {
    const tabs = Vue.ref([]);
    const activeTab = Vue.ref(0);
    const [selectedElementRefs, setSelectedElementRefs] = useRefs.useRefs();
    const {
      text: textKey,
      value: valueKey,
      children: childrenKey
    } = basic.extend({
      text: "text",
      value: "value",
      children: "children"
    }, props2.fieldNames);
    const getSelectedOptionsByValue = (options, value) => {
      for (const option of options) {
        if (option[valueKey] === value) {
          return [option];
        }
        if (option[childrenKey]) {
          const selectedOptions = getSelectedOptionsByValue(option[childrenKey], value);
          if (selectedOptions) {
            return [option, ...selectedOptions];
          }
        }
      }
    };
    const updateTabs = () => {
      const {
        options,
        modelValue
      } = props2;
      if (modelValue !== void 0) {
        const selectedOptions = getSelectedOptionsByValue(options, modelValue);
        if (selectedOptions) {
          let optionsCursor = options;
          tabs.value = selectedOptions.map((option) => {
            const tab = {
              options: optionsCursor,
              selected: option
            };
            const next = optionsCursor.find((item) => item[valueKey] === option[valueKey]);
            if (next) {
              optionsCursor = next[childrenKey];
            }
            return tab;
          });
          if (optionsCursor) {
            tabs.value.push({
              options: optionsCursor,
              selected: null
            });
          }
          Vue.nextTick(() => {
            activeTab.value = tabs.value.length - 1;
          });
          return;
        }
      }
      tabs.value = [{
        options,
        selected: null
      }];
    };
    const onSelect = (option, tabIndex) => {
      if (option.disabled) {
        return;
      }
      tabs.value[tabIndex].selected = option;
      if (tabs.value.length > tabIndex + 1) {
        tabs.value = tabs.value.slice(0, tabIndex + 1);
      }
      if (option[childrenKey]) {
        const nextTab = {
          options: option[childrenKey],
          selected: null
        };
        if (tabs.value[tabIndex + 1]) {
          tabs.value[tabIndex + 1] = nextTab;
        } else {
          tabs.value.push(nextTab);
        }
        Vue.nextTick(() => {
          activeTab.value++;
        });
      }
      const selectedOptions = tabs.value.map((tab) => tab.selected).filter(Boolean);
      emit("update:modelValue", option[valueKey]);
      const params = {
        value: option[valueKey],
        tabIndex,
        selectedOptions
      };
      emit("change", params);
      if (!option[childrenKey]) {
        emit("finish", params);
      }
    };
    const onClose = () => emit("close");
    const onClickTab = ({
      name: name2,
      title
    }) => emit("clickTab", name2, title);
    const renderHeader = () => props2.showHeader ? Vue.createVNode("div", {
      "class": bem("header")
    }, [Vue.createVNode("h2", {
      "class": bem("title")
    }, [slots.title ? slots.title() : props2.title]), props2.closeable ? Vue.createVNode(index.Icon, {
      "name": props2.closeIcon,
      "class": [bem("close-icon"), constant.HAPTICS_FEEDBACK],
      "onClick": onClose
    }, null) : null]) : null;
    const renderOption = (option, selectedOption, tabIndex) => {
      const {
        disabled
      } = option;
      const selected = !!(selectedOption && option[valueKey] === selectedOption[valueKey]);
      const color = option.color || (selected ? props2.activeColor : void 0);
      const Text = slots.option ? slots.option({
        option,
        selected
      }) : Vue.createVNode("span", null, [option[textKey]]);
      return Vue.createVNode("li", {
        "ref": selected ? setSelectedElementRefs(tabIndex) : void 0,
        "role": "menuitemradio",
        "class": [bem("option", {
          selected,
          disabled
        }), option.className],
        "style": {
          color
        },
        "tabindex": disabled ? void 0 : selected ? 0 : -1,
        "aria-checked": selected,
        "aria-disabled": disabled || void 0,
        "onClick": () => onSelect(option, tabIndex)
      }, [Text, selected ? Vue.createVNode(index.Icon, {
        "name": "success",
        "class": bem("selected-icon")
      }, null) : null]);
    };
    const renderOptions = (options, selectedOption, tabIndex) => Vue.createVNode("ul", {
      "role": "menu",
      "class": bem("options")
    }, [options.map((option) => renderOption(option, selectedOption, tabIndex))]);
    const renderTab = (tab, tabIndex) => {
      const {
        options,
        selected
      } = tab;
      const placeholder = props2.placeholder || t("select");
      const title = selected ? selected[textKey] : placeholder;
      return Vue.createVNode(index$2.Tab, {
        "title": title,
        "titleClass": bem("tab", {
          unselected: !selected
        })
      }, {
        default: () => {
          var _a, _b;
          return [(_a = slots["options-top"]) == null ? void 0 : _a.call(slots, {
            tabIndex
          }), renderOptions(options, selected, tabIndex), (_b = slots["options-bottom"]) == null ? void 0 : _b.call(slots, {
            tabIndex
          })];
        }
      });
    };
    const renderTabs = () => Vue.createVNode(index$1.Tabs, {
      "active": activeTab.value,
      "onUpdate:active": ($event) => activeTab.value = $event,
      "shrink": true,
      "animated": true,
      "class": bem("tabs"),
      "color": props2.activeColor,
      "swipeable": props2.swipeable,
      "onClickTab": onClickTab
    }, {
      default: () => [tabs.value.map(renderTab)]
    });
    const scrollIntoView = (el) => {
      const scrollParent = el.parentElement;
      if (scrollParent) {
        scrollParent.scrollTop = el.offsetTop - (scrollParent.offsetHeight - el.offsetHeight) / 2;
      }
    };
    updateTabs();
    Vue.watch(activeTab, (value) => {
      const el = selectedElementRefs.value[value];
      if (el) scrollIntoView(el);
    });
    Vue.watch(() => props2.options, updateTabs, {
      deep: true
    });
    Vue.watch(() => props2.modelValue, (value) => {
      if (value !== void 0) {
        const values = tabs.value.map((tab) => {
          var _a;
          return (_a = tab.selected) == null ? void 0 : _a[valueKey];
        });
        if (values.includes(value)) {
          return;
        }
      }
      updateTabs();
    });
    return () => Vue.createVNode("div", {
      "class": bem()
    }, [renderHeader(), renderTabs()]);
  }
});
exports.cascaderProps = cascaderProps;
exports.default = stdin_default;
