import { resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
import "core-js/modules/es.array.reduce.js";
//@ts-nocheck
import { computed, defineComponent, provide, ref } from "vue";
import { dataTableContextKey } from "./interface";
import TableHeader from "./TableHeader";
import TableBody from "./TableBody";
const tableProps = {
  prefixCls: {
    default: 'x-table'
  },
  columns: Array,
  data: Array,
  rowProps: Function,
  maxHeight: Number,
  rowClass: [String, Function],
  bordered: Boolean,
  bottomBordered: {
    default: true
  },
  scrollX: Number,
  virtualScroll: Boolean,
  size: {
    type: String,
    default: 'medium'
  }
};
const Table = defineComponent({
  name: 'x-table',
  props: tableProps,

  setup(props, {
    slots
  }) {
    const headerRef = ref(),
          bodyRef = ref();
    const leftFixedColumsRef = computed(() => {
      var _props$columns;

      return (_props$columns = props.columns) === null || _props$columns === void 0 ? void 0 : _props$columns.filter(col => col.fixed === 'left');
    });
    const rightFixedColumsRef = computed(() => {
      var _props$columns2;

      return (_props$columns2 = props.columns) === null || _props$columns2 === void 0 ? void 0 : _props$columns2.filter(col => col.fixed === 'right');
    });
    const fixedColumnLeftMapRef = computed(() => {
      let left = 0;
      return leftFixedColumsRef.value.reduce((map, col) => (map[col.key] = left, left += col.width || 0, map), {});
    });
    const fixedColumnRightMapRef = computed(() => {
      let right = 0;
      return rightFixedColumsRef.value.reverse().reduce((map, col) => (map[col.key] = right, right += col.width || 0, map), {});
    }); // ========================== Scroll ==========================

    let scrollType = '',
        lastLeft = 0;

    function onHeaderScroll(el) {
      scrollType = 'header';
      syncScroll(el);
    }

    function onBodyScroll(el) {
      scrollType = 'body';
      syncScroll(el);
    }

    function syncScroll(el) {
      if (el.target.scrollLeft == lastLeft) return;
      lastLeft = el.target.scrollLeft;

      if (scrollType === 'header') {
        bodyRef.value.$el.scrollLeft = lastLeft;
      } else {
        if (!headerRef.value) return;
        headerRef.value.$el.scrollLeft = lastLeft;
      }
    }

    provide(dataTableContextKey, {
      props,
      leftFixedColumsRef,
      rightFixedColumsRef,
      fixedColumnLeftMapRef,
      fixedColumnRightMapRef
    });
    return () => {
      const {
        prefixCls,
        maxHeight,
        bordered,
        bottomBordered
      } = props;
      const scrollable = !!maxHeight;
      const cls = [prefixCls, bordered && `${prefixCls}-bordered`, bottomBordered && `${prefixCls}-bottom-bordered`];
      return _createVNode("div", {
        "class": cls
      }, [scrollable && _createVNode(TableHeader, {
        "discrete": true,
        "ref": headerRef,
        "onScroll": onHeaderScroll
      }, null), _createVNode(TableBody, {
        "showHeader": !scrollable,
        "ref": bodyRef,
        "onScroll": onBodyScroll
      }, slots)]);
    };
  }

});

Table.install = app => {
  app.component(Table.name, Table);
};

export default Table;