import { ref, h, reactive, onBeforeUnmount } from 'vue';
import { defineVxeComponent } from '../../ui/src/comp';
import XEUtils from 'xe-utils';
import { getConfig, createEvent, renderEmptyElement } from '../../ui';
function createReactData() {
    return {};
}
function createInternalData() {
    return {};
}
export default defineVxeComponent({
    name: 'VxeTransfer',
    props: {
        modelValue: Array,
        options: Array,
        size: {
            type: String,
            default: () => getConfig().transfer.size || getConfig().size
        }
    },
    emits: [],
    setup(props, context) {
        const { emit, slots } = context;
        const xID = XEUtils.uniqueId();
        const refElem = ref();
        const reactData = reactive(createReactData());
        const internalData = createInternalData();
        const refMaps = {
            refElem
        };
        const computeMaps = {};
        const $xeTransfer = {
            xID,
            props,
            context,
            reactData,
            internalData,
            getRefMaps: () => refMaps,
            getComputeMaps: () => computeMaps
        };
        const dispatchEvent = (type, params, evnt) => {
            emit(type, createEvent(evnt, { $transfer: $xeTransfer }, params));
        };
        const transferMethods = {
            dispatchEvent
        };
        const transferPrivateMethods = {};
        Object.assign($xeTransfer, transferMethods, transferPrivateMethods);
        const renderVN = () => {
            const headerSlot = slots.header;
            const footerSlot = slots.footer;
            return h('div', {
                ref: refElem,
                class: 'vxe-transfer'
            }, [
                headerSlot
                    ? h('div', {
                        class: 'vxe-transfer--header'
                    }, headerSlot({ $transfer: $xeTransfer }))
                    : renderEmptyElement($xeTransfer),
                h('div', {
                    class: 'vxe-transfer--body'
                }, [
                    h('div', {
                        class: 'vxe-transfer--left-wrapper'
                    }),
                    h('div', {
                        class: 'vxe-transfer--buttons-wrapper'
                    }),
                    h('div', {
                        class: 'vxe-transfer--right-wrapper'
                    })
                ]),
                footerSlot
                    ? h('div', {
                        class: 'vxe-transfer--footer'
                    }, footerSlot({ $transfer: $xeTransfer }))
                    : renderEmptyElement($xeTransfer)
            ]);
        };
        onBeforeUnmount(() => {
            XEUtils.assign(reactData, createReactData());
            XEUtils.assign(internalData, createInternalData());
        });
        $xeTransfer.renderVN = renderVN;
        return $xeTransfer;
    },
    render() {
        return this.renderVN();
    }
});
