<template>
    <transition name="slide-fade" mode="out-in">
        <v-card>
            <template slot="header">
                <span v-if="mode === 'edit'" class="text-primary-500">
                    Editing: {{ currentItem.name }}
                </span>
                <span v-else class="text-green-500">
                    Creating: New Item
                </span>
            </template>

            <div class="menu-builder-form" :key="currentItem.id">

                <v-label>Name</v-label>
                <div class="mt-1 relative rounded-sm shadow-sm">
                    <input class="form-input block w-full rounded-sm sm:text-sm sm:leading-5"
                           type="text"
                           v-model="currentItem.name"
                    >
                </div>
                <v-error v-if="hasErrors && !itemHasName()">
                    Item name is required
                </v-error>

                <v-label class="mt-4">Type</v-label>
                <div class="mt-1 relative rounded-sm shadow-sm">
                    <select class="form-input block w-full rounded-sm sm:text-sm sm:leading-5 pr-10"
                            v-model="currentItem.type"
                    >
                        <option v-for="type in types" :selected="{ 'selected' : currentItem.type === type }">
                            {{ type }}
                        </option>
                    </select>
                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-500">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="fill-current h-4 w-6">
                            <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path>
                        </svg>
                    </div>
                </div>

                <div v-if="itemIsExternal()" class="external-link">
                    <v-label class="mt-4">Url</v-label>
                    <div class="mt-1 relative rounded-sm shadow-sm">
                        <input class="form-input block w-full rounded-sm sm:text-sm sm:leading-5"
                               type="text"
                               v-model="currentItem.url"
                        >
                    </div>

                    <v-label class="mt-4">Target</v-label>
                    <div class="mt-1 relative rounded-sm shadow-sm">
                        <select class="form-input block w-full rounded-sm sm:text-sm sm:leading-5"
                                v-model="currentItem.target"
                        >
                            <option v-for="target in targets"
                                    :selected="{ 'selected' : currentItem.target === target }"
                            >
                                {{ target }}
                            </option>
                        </select>
                        <div
                            class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-500"
                        >
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="fill-current h-4 w-6">
                                <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
                                ></path>
                            </svg>
                        </div>
                    </div>
                </div>

                <div v-else class="internal-link">
                    <v-label class="mt-4">Link Category</v-label>
                    <div class="mt-1 relative rounded-sm shadow-sm">
                        <select class="form-input block w-full rounded-sm sm:text-sm sm:leading-5"
                                v-model="currentItem.entity_type"
                        >
                            <option v-for="entityType in entityTypes"
                                    :selected="{ 'selected' : currentItem.entity_type === entityType }"
                            >
                                {{ entityType }}
                            </option>
                        </select>
                        <div
                            class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-500"
                        >
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="fill-current h-4 w-6">
                                <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
                                ></path>
                            </svg>
                        </div>
                    </div>
                    <v-error v-if="hasErrors && itemIsInternal() && !itemHasEntityType()">
                        Link Category is required
                    </v-error>

                    <div v-if="currentItem.entity_type">
                        <v-label class="mt-4">Link Id</v-label>
                        <div class="mt-1 relative rounded-sm shadow-sm">
                            <select class="form-input block w-full rounded-sm sm:text-sm sm:leading-5"
                                    v-model="currentItem.entity_id"
                            >
                                <option v-for="entityItem in entityItems"
                                        :value="entityItem.id"
                                        :selected="{ 'selected' : currentItem.entity_id === entityItem.id }"
                                >
                                    {{ entityItem.name }}
                                </option>
                            </select>
                        </div>
                    </div>
                    <v-error v-if="hasErrors && itemIsInternal() && (itemHasEntityType() && !itemHasEntityId())">
                        Link Id is required
                    </v-error>
                </div>

                <v-label class="mt-4">Parent Item</v-label>
                <div class="mt-1 relative rounded-sm shadow-sm">
                    <select class="form-input block w-full rounded-sm sm:text-sm sm:leading-5 pr-10"
                            v-model="currentItem.parent_id"
                    >
                        <option v-for="parentItem in parentItems"
                                :value="parentItem.id"
                                :selected="{ 'selected' : currentItem.parent_id === parentItem.id }"
                        >
                            {{ parentItem.name }}
                        </option>
                    </select>
                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-500">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="fill-current h-4 w-6">
                            <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path>
                        </svg>
                    </div>
                </div>
            </div>

            <template slot="footer">
                <div class="grid grid-cols-2 gap-2 items-center">

                    <div class="col-span-1">
                        <button v-if="mode === 'edit'"
                                class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm leading-5 font-medium rounded-sm text-gray-700 bg-white hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:text-gray-800 active:bg-gray-50 active:text-gray-800 transition duration-150 ease-in-out"
                                @click.prevent="newItem"
                        >
                            New Item
                        </button>
                    </div>

                    <div class="col-span-1 text-right">
                        <button
                            class="inline-flex items-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-sm text-white transition duration-150 ease-in-out"
                            :class="mode === 'create' ? 'bg-green-400 hover:bg-green-500 focus:outline-none focus:shadow-outline-green focus:border-green-600 active:bg-green-600' : 'bg-primary-400 hover:bg-primary-500 focus:outline-none focus:shadow-outline-primary focus:border-primary-600 active:bg-primary-600'"
                            @click.prevent="saveItem"
                        >
                            {{ mode === 'create' ? 'Create' : 'Update' }}
                        </button>
                    </div>

                </div>
            </template>

        </v-card>
    </transition>
</template>


<script>
export default {
    props : {
        mode : {type : String},
        currentItem : {type : Object},
        entityTypes : {type : Array}
    },
    data() {
        return {
            hasErrors : false,
            types : ['internal', 'external'],
            targets : ['_self', '_blank'],
            entityItems : [],
            parentItems : []
        }
    },
    computed : {
        entityType() {
            return this.currentItem.entity_type;
        },
        entityId() {
            return this.currentItem.entity_id;
        }
    },
    methods : {
        itemIsInternal() {
            return this.currentItem.type === 'internal';
        },
        itemIsExternal() {
            return this.currentItem.type === 'external';
        },
        itemHasName() {
            return this.currentItem.name;
        },
        itemHasEntityType() {
            return this.currentItem.entity_type;
        },
        itemHasEntityId() {
            return this.currentItem.entity_id;
        },
        newItem() {
            this.$emit('newItem');
        },
        saveItem() {
            this.hasErrors = false;
            if (!this.itemHasName()) {
                return this.hasErrors = true;
            }
            if (this.itemIsInternal() && (!this.itemHasEntityType() || !this.itemHasEntityId())) {
                return this.hasErrors = true;
            }

            this.$emit('saveItem', this.currentItem);
        },
        getEntityItems() {
            let apiUrl = null;

            switch (this.currentItem.entity_type) {
                case 'Document':
                    apiUrl = '/api/documents';
                    break;
                case 'Page':
                    apiUrl = '/api/pages';
                    break;
                case 'Post':
                    apiUrl = '/api/posts';
                    break;
                case 'Post Category':
                    apiUrl = '/api/post-categories';
                    break;
                case 'Project':
                    apiUrl = '/api/projects';
                    break;
                case 'Project Category':
                    apiUrl = '/api/project-categories';
                    break;
            }

            if (apiUrl) {
                window.axios.get(apiUrl)
                    .then((response) => {
                        this.entityItems = response.data.data || response.data.items;
                    })
                    .catch(e => {
                        alert(e.message);
                    });
            }
        },
        getParentItems() {
            let apiUrl = this.currentItem
                ? '/api/menu-items?item_id=' + this.currentItem.id
                : '/api/menu-items';

            window.axios.get(apiUrl)
                .then((response) => {
                    this.parentItems = response.data.data;
                    if (this.parentItems) { // prepend the 'please select' option
                        this.parentItems.unshift(this.defaultParentItem());
                    }
                })
                .catch(e => {
                    alert(e.message);
                });
        },
        defaultParentItem() {
            return {id : null, parent_id : null, name : '-- Please select --'}
        }
    },
    watch : {
        entityType : function () {
            this.getEntityItems();
        },
        entityId : function () {
            this.getEntityItems();
            this.getParentItems();
        },
    },
    mounted() {
        this.getParentItems();
    }
}
</script>
