"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
/* eslint-disable @typescript-eslint/no-non-null-assertion */
const vue_1 = require("vue");
const _utils_1 = require("../../_utils");
const Header_1 = __importDefault(require("./TableParts/Header"));
const Body_1 = __importDefault(require("./TableParts/Body"));
const interface_1 = require("./interface");
exports.default = (0, vue_1.defineComponent)({
    setup() {
        const { mergedClsPrefixRef, rightFixedColumnsRef, leftFixedColumnsRef, bodyWidthRef, maxHeightRef, minHeightRef, flexHeightRef, syncScrollState
        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         } = (0, vue_1.inject)(interface_1.dataTableInjectionKey);
        const headerInstRef = (0, vue_1.ref)(null);
        const bodyInstRef = (0, vue_1.ref)(null);
        const selfElRef = (0, vue_1.ref)(null);
        const fixedStateInitializedRef = (0, vue_1.ref)(!(leftFixedColumnsRef.value.length || rightFixedColumnsRef.value.length));
        const bodyStyleRef = (0, vue_1.computed)(() => {
            return {
                maxHeight: (0, _utils_1.formatLength)(maxHeightRef.value),
                minHeight: (0, _utils_1.formatLength)(minHeightRef.value)
            };
        });
        function handleBodyResize(entry) {
            bodyWidthRef.value = entry.contentRect.width;
            syncScrollState();
            if (!fixedStateInitializedRef.value) {
                fixedStateInitializedRef.value = true;
            }
        }
        function getHeaderElement() {
            const { value } = headerInstRef;
            if (value) {
                return value.$el;
            }
            return null;
        }
        function getBodyElement() {
            const { value } = bodyInstRef;
            if (value) {
                return value.getScrollContainer();
            }
            return null;
        }
        const exposedMethods = {
            getBodyElement,
            getHeaderElement
        };
        (0, vue_1.watchEffect)(() => {
            const { value: selfEl } = selfElRef;
            if (!selfEl)
                return;
            const transitionDisabledClass = `${mergedClsPrefixRef.value}-data-table-base-table--transition-disabled`;
            if (fixedStateInitializedRef.value) {
                setTimeout(() => {
                    selfEl.classList.remove(transitionDisabledClass);
                }, 0);
            }
            else {
                selfEl.classList.add(transitionDisabledClass);
            }
        });
        return Object.assign({ maxHeight: maxHeightRef, mergedClsPrefix: mergedClsPrefixRef, selfElRef,
            headerInstRef,
            bodyInstRef, bodyStyle: bodyStyleRef, flexHeight: flexHeightRef, handleBodyResize }, exposedMethods);
    },
    render() {
        const { mergedClsPrefix, maxHeight, flexHeight } = this;
        const headerInBody = maxHeight === undefined && !flexHeight;
        return ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-data-table-base-table`, ref: "selfElRef" },
            headerInBody ? null : (0, vue_1.h)(Header_1.default, { ref: "headerInstRef" }),
            (0, vue_1.h)(Body_1.default, { ref: "bodyInstRef", style: this.bodyStyle, showHeader: headerInBody, flexHeight: flexHeight, onResize: this.handleBodyResize }),
            (0, vue_1.renderSlot)(this.$slots, 'default')));
    }
});
