// components/contentstream/contentstream.js
Component({

    /**
     * Component properties
     */
    properties: {
        content: {
            type: Array,
            value: []
        },
        is_prompt: {
            type: Boolean,
        },
    },

    /**
     * Component initial data
     */
    data: {
        visible_content: [],
        next_index: 0,
        next_offset: 0,
    },

    /**
     * Component methods
     */
    methods: {
        restart_content_output() {
            console.log('restart_content_output');
            if (this.properties.is_prompt) {
                this.setData({
                    visible_content: this.properties.content
                });
                return;
            }
            this.setData({
                visible_content: [],
                next_index: 0,
                next_offset: 0,
            });
            setTimeout(() => {
                this.update_interval = setInterval(() => {
                    this.update_visible_content();
                }, 50);
            }, 500);
        },
        handle_onclick(event) {
            var index = event.currentTarget.dataset.index;  
            if (this.properties.content[index].onclick) {
                console.log('call onclick');
                this.properties.content[index].onclick();
            }
        },
        update_visible_content() {
            console.log('update_visible_content', this.data.next_index, this.properties.content.length);
            if (this.data.next_index >= this.properties.content.length) {
                clearInterval(this.update_interval);
                return;
            }
            var next_entry = this.properties.content[this.data.next_index];
            if (next_entry.type != 'text') {
                // just add the next entry to the visible content
                this.setData({
                    visible_content: this.data.visible_content.concat(next_entry),
                    next_index: this.data.next_index + 1,
                    next_offset: 0
                });
                return;
            }
            if (this.data.next_offset >= next_entry.content.length) {
                // end of current entry, move to the next entry
                this.setData({
                    next_index: this.data.next_index + 1,
                    next_offset: 0,
                })
                return;
            }
            // here we have some remaining text to add to the last visible content
            if (this.data.next_offset == 0) {
                var next_entry = this.properties.content[this.data.next_index];
                var new_entry = JSON.parse(JSON.stringify(next_entry));
                new_entry.content = "";
                this.setData({
                    visible_content: this.data.visible_content.concat(new_entry)
                });
            }
            var last_visible_entry = this.data.visible_content[this.data.visible_content.length - 1];
            var new_text = next_entry.content.slice(this.data.next_offset, this.data.next_offset + 1);
            last_visible_entry.content = last_visible_entry.content + new_text;
            this.setData({
                visible_content: this.data.visible_content.slice(0, this.data.visible_content.length - 1).concat(last_visible_entry),
                next_offset: this.data.next_offset + 1,
            });
        }

    },
    ready() {
        this.restart_content_output();
    },
    detached() {
        clearInterval(this.update_interval);
    },
})