<script>

export default {
    name: 'tree-view',

    inheritAttrs: false,

    props: {
        inputType: {
            type: String,
            required: false,
            default: 'checkbox'
        },

        nameField: {
            type: String,
            required: false,
            default: 'permissions'
        },

        idField: {
            type: String,
            required: false,
            default: 'id'
        },

        valueField: {
            type: String,
            required: false,
            default: 'value'
        },

        captionField: {
            type: String,
            required: false,
            default: 'name'
        },

        childrenField: {
            type: String,
            required: false,
            default: 'children'
        },

        items: {
            type: [Array, String, Object],
            required: false,
            default: () => ([])
        },

        behavior: {
            type: String,
            required: false,
            default: 'reactive'
        },

        value: {
            type: [Array, String, Object],
            required: false,
            default: () => ([])
        }
    },

    data() {
        return {
            finalValues: []
        }
    },

    computed: {
        savedValues() {
            if (!this.value)
                return [];

            if (this.inputType == 'radio')
                return [this.value];

            return (typeof this.value == 'string') ? JSON.parse(this.value) : this.value;
        }
    },


    methods: {
        generateChildren() {
            let childElements = [];

            let items = (typeof this.items == 'string') ? JSON.parse(this.items) : this.items;

            for (let key in items) {
                childElements.push(this.generateTreeItem(items[key]));
            }

            return childElements;
        },

        generateTreeItem(item) {
            return this.$createElement('tree-item', {
                props: {
                    items: item,
                    value: this.finalValues,
                    savedValues: this.savedValues,
                    nameField: this.nameField,
                    inputType: this.inputType,
                    captionField: this.captionField,
                    childrenField: this.childrenField,
                    valueField: this.valueField,
                    idField: this.idField,
                    behavior: this.behavior
                },
                on: {
                    input: selection => {
                        this.finalValues = selection;
                    }
                },
            })
        }
    },

    render(createElement) {
        return createElement('div', {
                class: [
                    'tree-container',
                ]
            }, [this.generateChildren()]
        )
    }
}
</script>
