import { inject, ref, computed, h, Teleport } from "vue";
import { defineVxeComponent } from "../../../ui/src/comp.mjs";
import "../../../ui/index.mjs";
import { isEnableConf, formatText } from "../../../ui/src/utils.mjs";
import { getPropClass, toCssUnit } from "../../../ui/src/dom.mjs";
import { getSlotVNs } from "../../../ui/src/vn.mjs";
import { warnLog } from "../../../ui/src/log.mjs";
import XEUtils from "xe-utils";
import { VxeUI } from "../../../../../@vxe-ui/core/es/index.esm.mjs";
const { getI18n, getIcon, renderer, renderEmptyElement } = VxeUI;
const TableFilterPanelComponent = defineVxeComponent({
  name: "VxeTableFilterPanel",
  props: {
    filterStore: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props, context) {
    const xID = XEUtils.uniqueId();
    const $xeTable = inject("$xeTable", {});
    const { reactData: tableReactData, internalData: tableInternalData, getComputeMaps } = $xeTable;
    const { computeFilterOpts } = getComputeMaps();
    const refElem = ref();
    const refMaps = {
      refElem
    };
    const $xeFilterPanel = {
      xID,
      props,
      context,
      getRefMaps: () => refMaps
    };
    const computeHasCheckOption = computed(() => {
      const { filterStore } = props;
      const { column } = filterStore;
      return column && column.filters && column.filters.some((option) => option.checked);
    });
    const filterCheckAllEvent = (evnt, value) => {
      const { filterStore } = props;
      const { column } = filterStore;
      if (column && column.filters) {
        column.filters.forEach((option) => {
          option._checked = value;
          option.checked = value;
        });
      }
      filterStore.isAllSelected = value;
      filterStore.isIndeterminate = false;
    };
    const confirmFilter = (evnt) => {
      const { filterStore } = props;
      if (!evnt) {
        warnLog("vxe.error.delFunc", ["confirmFilter", "saveFilterPanelByEvent"]);
      }
      $xeTable.handleFilterConfirmFilter(evnt || new Event("click"), filterStore.column || null);
    };
    const changeRadioOption = (evnt, checked, item) => {
      $xeTable.handleFilterChangeRadioOption(evnt, checked, item);
    };
    const resetFilter = (evnt) => {
      const { filterStore } = props;
      $xeTable.handleFilterResetFilter(evnt, filterStore.column || null);
    };
    const changeMultipleOption = (evnt, checked, item) => {
      $xeTable.handleFilterChangeMultipleOption(evnt, checked, item);
    };
    const changeOption = (evnt, checked, item) => {
      $xeTable.handleFilterChangeOption(evnt, checked, item);
    };
    const changeAllOption = (evnt, checked) => {
      const { filterStore } = props;
      const { column } = filterStore;
      if (column && column.filterMultiple) {
        filterCheckAllEvent(evnt, checked);
      } else {
        resetFilter(evnt);
      }
    };
    const filterPanelMethods = {
      changeRadioOption,
      changeMultipleOption,
      changeAllOption,
      changeOption,
      confirmFilter,
      resetFilter
    };
    Object.assign($xeFilterPanel, filterPanelMethods);
    const renderOptions = (filterRender, compConf) => {
      const { filterStore } = props;
      const { column, maxHeight } = filterStore;
      if (!column) {
        return [];
      }
      const { filterMultiple, filters, slots } = column;
      const filterOptions = filters || [];
      const filterSlot = slots ? slots.filter : null;
      const params = Object.assign({}, tableInternalData._currFilterParams, { option: filterOptions[0], $panel: $xeFilterPanel, $table: $xeTable });
      const rtFilter = compConf ? compConf.renderTableFilter || compConf.renderFilter : null;
      if (filterSlot) {
        return [
          h("div", {
            class: "vxe-table--filter-template",
            style: maxHeight ? {
              maxHeight: toCssUnit(maxHeight)
            } : {}
          }, $xeTable.callSlot(filterSlot, params))
        ];
      } else if (filterRender && rtFilter) {
        return [
          h("div", {
            class: "vxe-table--filter-template",
            style: maxHeight ? {
              maxHeight: toCssUnit(maxHeight)
            } : {}
          }, getSlotVNs(rtFilter(filterRender, params)))
        ];
      }
      const isAllChecked = filterMultiple ? filterStore.isAllSelected : !filterOptions.some((item) => item._checked);
      const isAllIndeterminate = filterMultiple && filterStore.isIndeterminate;
      return [
        h("ul", {
          class: "vxe-table--filter-header"
        }, [
          h("li", {
            class: ["vxe-table--filter-option", {
              "is--checked": isAllChecked,
              "is--indeterminate": isAllIndeterminate
            }],
            title: getI18n(filterMultiple ? "vxe.table.allTitle" : "vxe.table.allFilter"),
            onClick: (evnt) => {
              changeAllOption(evnt, !filterStore.isAllSelected);
            }
          }, (filterMultiple ? [
            h("span", {
              class: ["vxe-checkbox--icon", isAllIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : isAllChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED]
            })
          ] : []).concat([
            h("span", {
              class: "vxe-checkbox--label"
            }, getI18n("vxe.table.allFilter"))
          ]))
        ]),
        h("ul", {
          class: "vxe-table--filter-body",
          style: maxHeight ? {
            maxHeight: toCssUnit(maxHeight)
          } : {}
        }, filterOptions.map((item) => {
          const isChecked = item._checked;
          return h("li", {
            class: ["vxe-table--filter-option", {
              "is--checked": item._checked
            }],
            title: item.label,
            onClick: (evnt) => {
              changeOption(evnt, !item._checked, item);
            }
          }, (filterMultiple ? [
            h("span", {
              class: ["vxe-checkbox--icon", isChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED]
            })
          ] : []).concat([
            h("span", {
              class: "vxe-checkbox--label"
            }, formatText(item.label, 1))
          ]));
        }))
      ];
    };
    const renderFooters = () => {
      const { filterStore } = props;
      const { column } = filterStore;
      if (!column) {
        return [];
      }
      const filterOpts = computeFilterOpts.value;
      const hasCheckOption = computeHasCheckOption.value;
      const { filterRender, filterMultiple } = column;
      const { confirmButtonText, resetButtonText, showFooter } = filterOpts;
      const compConf = isEnableConf(filterRender) ? renderer.get(filterRender.name) : null;
      const isDisabled = !hasCheckOption && !filterStore.isAllSelected && !filterStore.isIndeterminate;
      let showFlFoot = !!filterMultiple;
      if (XEUtils.isBoolean(showFooter)) {
        showFlFoot = showFooter;
      } else if (compConf) {
        showFlFoot = !(compConf.showTableFilterFooter === false || compConf.showFilterFooter === false || compConf.isFooter === false);
      }
      return showFlFoot ? [
        h("div", {
          class: "vxe-table--filter-footer"
        }, [
          h("button", {
            class: {
              "is--disabled": isDisabled
            },
            disabled: isDisabled,
            onClick: confirmFilter
          }, confirmButtonText || getI18n("vxe.table.confirmFilter")),
          h("button", {
            onClick: resetFilter
          }, resetButtonText || getI18n("vxe.table.resetFilter"))
        ])
      ] : [];
    };
    const renderVN = () => {
      const { filterStore } = props;
      const { initStore } = tableReactData;
      const { visible, column } = filterStore;
      if (!column) {
        return renderEmptyElement($xeFilterPanel);
      }
      const filterRender = column ? column.filterRender : null;
      const compConf = filterRender && isEnableConf(filterRender) ? renderer.get(filterRender.name) : null;
      const filterClassName = compConf ? compConf.tableFilterClassName || compConf.filterClassName : "";
      const params = Object.assign({}, tableInternalData._currFilterParams, { $panel: $xeFilterPanel, $table: $xeTable });
      const tableProps = $xeTable.props;
      const { computeSize } = $xeTable.getComputeMaps();
      const vSize = computeSize.value;
      const filterOpts = computeFilterOpts.value;
      const { transfer, destroyOnClose, className } = filterOpts;
      return h(Teleport, {
        to: "body",
        disabled: !transfer
      }, [
        h("div", {
          ref: refElem,
          class: [
            "vxe-table--filter-wrapper",
            "filter--prevent-default",
            className,
            getPropClass(filterClassName, params),
            {
              [`size--${vSize}`]: vSize,
              "is--animat": tableProps.animat,
              "is--multiple": column.filterMultiple,
              "is--active": visible
            }
          ],
          style: filterStore.style
        }, initStore.filter && (destroyOnClose ? visible : true) && column ? renderOptions(filterRender, compConf).concat(renderFooters()) : [])
      ]);
    };
    $xeFilterPanel.renderVN = renderVN;
    return $xeFilterPanel;
  },
  render() {
    return this.renderVN();
  }
});
export {
  TableFilterPanelComponent as default
};
