<template>
    <div :class="$style.root">
        <template v-if="keys">
            <lcap-json-view-node
                v-for="subKey in keys"
                :key="subKey"
                :property="subKey"
                v-model="value[subKey]"
                :readonly="readonly"
                :disabled="disabled"
            ></lcap-json-view-node>
        </template>
        <slot></slot>
    </div>
</template>

<script>
import LcapJsonViewNode from './node.vue';

export default {
    name: 'lcap-json-view',
    childName: 'lcap-json-view-node',
    components: {
        LcapJsonViewNode,
    },
    mixins: [LcapJsonViewNode],
    props: {
        expandDepth: { type: Number, default: 0 },
    },

    created() {
        this.rootVM = this;
        this.$on('add-node-vm', (nodeVM) => {
            nodeVM.rootVM = this;
            this.nodeVMs.push(nodeVM);
        });
        this.$on('remove-node-vm', (nodeVM) => {
            nodeVM.rootVM = undefined;
            this.nodeVMs.splice(this.nodeVMs.indexOf(nodeVM), 1);
        });
    },
    methods: {
        change($event) {
            this.$emit('change', $event);
        },
    },
};
</script>

<style module>
.root {
    background: white;
    border: 1px solid var(--border-color-base);
    overflow-x: auto;
}

.root[theme="one-monakai"] {
    background: var(--background-color-default);
    color: #abb2bf;
}
</style>
