"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.createLayoutComponent = exports.layoutInjectionKey = void 0;
const vue_1 = require("vue");
const _internal_1 = require("../../_internal");
const _mixins_1 = require("../../_mixins");
const styles_1 = require("../styles");
const layout_cssr_1 = require("./styles/layout.cssr");
const interface_1 = require("./interface");
const layoutProps = {
    embedded: Boolean,
    position: interface_1.positionProp,
    nativeScrollbar: {
        type: Boolean,
        default: true
    },
    scrollbarProps: Object,
    onScroll: Function,
    contentStyle: {
        type: [String, Object],
        default: ''
    },
    hasSider: Boolean,
    siderPlacement: {
        type: String,
        default: 'left'
    }
};
exports.layoutInjectionKey = Symbol('layout');
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
function createLayoutComponent(isContent) {
    return (0, vue_1.defineComponent)({
        name: isContent ? 'LayoutContent' : 'Layout',
        props: Object.assign(Object.assign({}, _mixins_1.useTheme.props), layoutProps),
        setup(props) {
            const scrollableElRef = (0, vue_1.ref)(null);
            const scrollbarInstRef = (0, vue_1.ref)(null);
            const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
            const themeRef = (0, _mixins_1.useTheme)('Layout', 'Layout', layout_cssr_1.default, styles_1.layoutLight, props, mergedClsPrefixRef);
            function scrollTo(options, y) {
                if (props.nativeScrollbar) {
                    const { value: scrollableEl } = scrollableElRef;
                    if (scrollableEl) {
                        if (y === undefined) {
                            scrollableEl.scrollTo(options);
                        }
                        else {
                            scrollableEl.scrollTo(options, y);
                        }
                    }
                }
                else {
                    const { value: scrollbarInst } = scrollbarInstRef;
                    if (scrollbarInst) {
                        scrollbarInst.scrollTo(options, y);
                    }
                }
            }
            (0, vue_1.provide)(exports.layoutInjectionKey, props);
            const hasSiderStyle = {
                display: 'flex',
                flexWrap: 'nowrap',
                width: '100%',
                flexDirection: 'row'
            };
            const exposedMethods = {
                scrollTo
            };
            return Object.assign({ mergedClsPrefix: mergedClsPrefixRef, scrollableElRef,
                scrollbarInstRef,
                hasSiderStyle, mergedTheme: themeRef, cssVars: (0, vue_1.computed)(() => {
                    const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
                    return {
                        '--bezier': cubicBezierEaseInOut,
                        '--color': props.embedded ? self.colorEmbedded : self.color,
                        '--text-color': self.textColor
                    };
                }) }, exposedMethods);
        },
        render() {
            const { mergedClsPrefix, hasSider } = this;
            const hasSiderStyle = hasSider ? this.hasSiderStyle : undefined;
            const layoutClass = [
                isContent && `${mergedClsPrefix}-layout-content`,
                `${mergedClsPrefix}-layout`,
                `${mergedClsPrefix}-layout--${this.position}-positioned`
            ];
            return ((0, vue_1.h)("div", { class: layoutClass, style: this.cssVars }, this.nativeScrollbar ? ((0, vue_1.h)("div", { ref: "scrollableElRef", class: `${mergedClsPrefix}-layout-scroll-container`, style: [this.contentStyle, hasSiderStyle], onScroll: this.onScroll }, this.$slots)) : ((0, vue_1.h)(_internal_1.NScrollbar, Object.assign({}, this.scrollbarProps, { onScroll: this.onScroll, ref: "scrollbarInstRef", theme: this.mergedTheme.peers.Scrollbar, themeOverrides: this.mergedTheme.peerOverrides.Scrollbar, contentStyle: [this.contentStyle, hasSiderStyle] }), this.$slots))));
        }
    });
}
exports.createLayoutComponent = createLayoutComponent;
exports.default = createLayoutComponent(false);
