<template>
    <div ref="pagesList">
        <template v-for="(page, pageIndex) in pages">
            <div class="workspace__panel" :key="pageIndex+'-panel'" v-if="!editorLoading"
                :style="calculatePageSize(page, ['width'])" :class="{ disabled: isLockedDocument }"
                ref="pages_render">
                <a class="btn" @click="addPage">
                    <img src="@/assets/img/plus.svg" alt="plus"><span>Add</span>
                </a>

                <div class="dropdown-button relative">
                    <a class="btn" @click="changeMenuTopOpen(pageMenuTopOpen === pageIndex ? false : pageIndex)">
                        <img src="@/assets/img/more-horizontal.svg">
                    </a>

                    <ul class="page_dropdown_top_menu" v-show="pageMenuTopOpen === pageIndex">
                        <li v-if="pages.length">
                            <a class="flex items-center" @click="openPageProperties(pageIndex)">
                                <img src="@/assets/img/Settings.svg"> Page Properties
                            </a>
                        </li>

                        <li v-if="pages.length">
                            <a class="flex items-center" :class="{ disabled: renderPage && renderPage.isShow }" @click="dublicatePage(page)">
                                <img src="@/assets/img/copy-item-big-right.svg"> Dublicate
                            </a>
                        </li>

                        <li v-if="pages.length">
                            <a class="flex items-center" @click="deletePage(pageIndex)">
                                <img src="@/assets/img/trash-2.svg"> Delete page
                            </a>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="workspace__field relative" :key="pageIndex">
                <div class="body_page overflow-x-auto bg-white" style="color: red;">
                    <div :id="page.id + '_editor'"></div>
                </div>
            </div>
        </template>
    </div>
</template>

<script>
    import lib from '../../lib';

    export default {
        props: {
            isLockedDocument: {
                type: Boolean,
                default: () => false
            },

            editorLoading: {
                type: Boolean,
                default: () => false
            },

            pageMenuTopOpen: {
                type: [String, Number, Boolean],
                default: () => false
            },

            renderPage: {
                type: Object,
                default: () => ({})
            }
        },

        methods: {
            renderPagesHTML() {
                const addPage = document.createElement('a');
                addPage.setAttribute('class', 'btn');
                addPage.innerHTML = `<img src="${require('@/assets/img/plus.svg')}" alt="plus"><span>Add</span>`;
            },

            calculatePageSize(page, fields) {
                return lib.calculatePageSize(page, fields, this.pageSize);
            },

            addPage() {
                lib.addComponent('page-break');
            },

            changeMenuTopOpen(value) {
                console.log('Update', value);
                this.$emit('changeMenuTopOpen', value);
            },

            sidebarOpen(sidebar, title, icon) {
                this.$emit('sidebarOpen', { sidebar, title, icon })
            },

            openPageProperties(index) {
                this.changeMenuTopOpen(false);
                this.sidebarOpen('PageProperties', 'Page Properties', 'chevron-down');
            },

            dublicatePage(page) {
                const editor = this.$store.state.editors.find(ed => ed.id == page.id);
                if(editor) {
                    const json = utils.generateDocumentExport([editor]);
                    if(json && json[0]) {
                        const id = 'P_' + utils.uuid();
                        this.$store.state.selectedEditor = id;
                        const data = {
                            id, data: json[0].json,
                            setting: json[0].setting
                        };

                        this.$store.state.pages = this.$store.state.pages.reduce((result, p) => {
                            result.push(p);
                            if(p.id == page.id) result.push(data);

                            return result;
                        }, []);

                        this.$nextTick(() => document.getElementById(id + '_editor').scrollIntoView());
                    }
                }

                this.changeMenuTopOpen(false);
            },

            deletePage(pageIndex) {
                // this.editorWorkspaceOutside();
                this.$emit('editorWorkspaceOutside');
                // this.pages.splice(pageIndex, 1);
                this.$store.state.pages.splice(pageIndex, 1);
                this.$store.state.editors.splice(pageIndex, 1);
                //this.$store.state._editors.splice(pageIndex, 1);
                // lib.deletePageByIndex(pageIndex);
            },
        },

        computed: {
            pageSize() {
                return this.$store.state.defaultPageSize;
            },

            pages() {
                return this.$store.state.pages;
            }
        }
    }
</script>