<template>
    <div class="row">
        <div class="col-sm-12">
            <div class="nav-tabs-custom">
                <ul class="nav nav-tabs">
                    <li v-if="canBrowse" class="active"><a :href="getIndexUrl()" v-text="__('tabPages')"></a></li>
                    <li v-if="canBrowseBlocks"><a :href="getBlocksUrl()" v-text="__('tabBlocks')"></a></li>
                </ul>
                <div class="tab-content no-padding">
                    <div id="dt-header" class="clearfix dataTables_wrapper form-inline dt-bootstrap dt-wrapper-padding">
                        <div class="clearfix">
                            <div v-if="canCreate" class="dt-buttons btn-group dt-margin-right">
                                <a class="btn btn-default" tabindex="0" :href="getCreateUrl()"><span class="fa fa-plus text-success"></span> <span class="text-success" v-text="__('createText')"></span></a>
                            </div>
                            <div id="dataTableBuilder_filter" class="dataTables_filter">
                                <label>{{ __('searchText') }}<input v-model="filterKey" type="text" class="form-control input-sm"></label>
                            </div>
                        </div>
                        <draggable
                                element="ul"
                                class="nav nav-pills nav-stacked dt-table-border"
                                @start="disableFilter"
                                @end="syncOrder"
                                v-model="data"
                                :move="verifyPosition"
                                :options="{draggable:'.nav-stacked-row', handle: '.nav-stacked-drag', filter: '.nav-no-drag'}">
                            <cms-list-item v-for="page in filteredPages"
                                           :page="page"
                                           :key="page.position"
                                           :can-update="canUpdate"
                                           :can-reorder="canReorder"
                                           :can-status="canToggleStatus"
                                           :can-toggle-visibility="canToggleVisibility"
                            ></cms-list-item>
                            <li v-if="!pages.length"><span class="text-danger" v-text="__('noRecords')"></span> <a v-if="canCreate" href="getCreateUrl()" v-text="__('createText')"></a></li>
                        </draggable>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import draggable from 'vuedraggable';

    export default {
        components: {
            draggable,
        },
        props: {
            'pages': {
                type: Array,
                default: []
            },
            'can-browse': {
                type: Boolean,
                default: false
            },
            'can-create': {
                type: Boolean,
                default: false
            },
            'can-update': {
                type: Boolean,
                default: false
            },
            'can-reorder': {
                type: Boolean,
                default: false
            },
            'can-toggle-status': {
                type: Boolean,
                default: false
            },
            'can-toggle-visibility': {
                type: Boolean,
                default: false
            },
            'can-browse-blocks': {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                data: this.pages,
                filterKey: '',
                filteredData: []
            }
        },
        computed: {
            filteredPages() {
                var filterKey = this.filterKey && this.filterKey.toLowerCase();
                if (filterKey) {
                    return this.data.filter(function (page) {
                        return Object.keys(page).some(function (key) {
                            return String(page[key]).toLowerCase().indexOf(filterKey) > -1;
                        })
                    });
                }

                return this.data;
            }
        },
        methods: {
            __(key) {
                if (window.Translation.hasOwnProperty(key)) {
                    return window.Translation[key];
                }
                return '';
            },
            disableFilter() {
                this.filterKey = '';
            },
            verifyPosition(event) {
                if (! this.canReorder) {
                    return false;
                }
                return (event.draggedContext.futureIndex !== 0);
            },
            syncOrder() {
                axios.post(window.Pages.reorderUrl, this.getReorderedPositions())
                     .then(response => {
                        window.Ignite.Core.flash('Page order updated successfully.', 'success');
                     })
                     .catch(error => {
                        window.Ignite.Core.flash('Page order was not updated.', 'error');
                     });
            },
            getReorderedPositions() {
                var updates = [];

                this.data.forEach(function(page, index) {
                    updates.push({
                        id: page.id,
                        position: index + 1
                    });
                });

                return updates;
            },
            getIndexUrl() {
                return window.Pages.indexUrl;
            },
            getCreateUrl() {
                return window.Pages.createUrl;
            },
            getBlocksUrl() {
                return window.Blocks.indexUrl;
            }
        }
    }
</script>
