<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="form-builder-form" :key="currentItem.id">

                <div class="input-group">
                    <v-label>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 }"
                                    :value="type"
                            >
                                {{ type | ucwords }}
                            </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 class="input-group mt-4">
                    <v-label>
                        <span v-if="itemIsHtml()">Html</span>
                        <span v-else>Label</span>
                        <span class="text-red-500">*</span>
                    </v-label>
                    <div class="mt-1 relative rounded-sm shadow-sm">
                        <textarea
                            v-if="itemIsHtml()" class="form-input block w-full rounded-sm sm:text-sm sm:leading-5"
                            rows="5"
                            v-model="currentItem.label"
                        ></textarea>
                        <input
                            v-else class="form-input block w-full rounded-sm sm:text-sm sm:leading-5"
                            type="text"
                            v-model="currentItem.label"
                        >
                    </div>
                    <v-error v-if="hasErrors && ! itemHasLabel()">Item label is required</v-error>
                </div>

                <div class="input-group mt-4">
                    <v-label>Width</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.width"
                        >
                            <option :selected="{ 'selected' : ! currentItem.width }" value="">
                                Auto
                            </option>
                            <option :selected="{ 'selected' : currentItem.width === 'col-md-12' }" value="col-md-12">
                                col-md-12
                            </option>
                            <option :selected="{ 'selected' : currentItem.width === 'col-md-11' }" value="col-md-11">
                                col-md-11
                            </option>
                            <option :selected="{ 'selected' : currentItem.width === 'col-md-10' }" value="col-md-10">
                                col-md-10
                            </option>
                            <option :selected="{ 'selected' : currentItem.width === 'col-md-9' }" value="col-md-9">
                                col-md-9
                            </option>
                            <option :selected="{ 'selected' : currentItem.width === 'col-md-8' }" value="col-md-8">
                                col-md-8
                            </option>
                            <option :selected="{ 'selected' : currentItem.width === 'col-md-7' }" value="col-md-7">
                                col-md-7
                            </option>
                            <option :selected="{ 'selected' : currentItem.width === 'col-md-6' }" value="col-md-6">
                                col-md-6
                            </option>
                            <option :selected="{ 'selected' : currentItem.width === 'col-md-5' }" value="col-md-5">
                                col-md-5
                            </option>
                            <option :selected="{ 'selected' : currentItem.width === 'col-md-4' }" value="col-md-4">
                                col-md-4
                            </option>
                            <option :selected="{ 'selected' : currentItem.width === 'col-md-3' }" value="col-md-3">
                                col-md-3
                            </option>
                            <option :selected="{ 'selected' : currentItem.width === 'col-md-2' }" value="col-md-2">
                                col-md-2
                            </option>
                            <option :selected="{ 'selected' : currentItem.width === 'col-md-1' }" value="col-md-1">
                                col-md-1
                            </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 class="input-group mt-4">
                    <v-label>
                        <span v-if="itemIsHtml()">Display Html</span>
                        <span v-else>Display Label</span>
                    </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.display_label"
                        >
                            <option :selected="{ 'selected' : currentItem.display_label === 'yes' }" value="yes">
                                Yes
                            </option>
                            <option :selected="{ 'selected' : currentItem.display_label === 'no' }" value="no">
                                No
                            </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-if="! itemIsText() && ! itemIsHtml()" class="input-group mt-4">
                    <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>
                </div>

                <div v-if="itemIsInput() || itemIsTextarea() || itemIsEmail()" class="input-group mt-4">
                    <v-label>Placeholder</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.placeholder"
                        >
                    </div>
                </div>

                <div v-if="itemIsSelect()" class="input-group mt-4">
                    <v-label>
                        Options - <small>Pipe Separated</small>
                    </v-label>
                    <div class="mt-1 relative rounded-sm shadow-sm">
                        <textarea class="form-input block w-full rounded-sm sm:text-sm sm:leading-5"
                                  type="text"
                                  v-model="currentItem.options"
                                  placeholder="Option 1, Option 2, Option 3, Option 4"
                        ></textarea>
                    </div>
                    <v-error v-if="hasErrors && (itemIsSelect() && !itemHasOptions())">
                        Item options are required
                    </v-error>
                </div>

                <div class="input-group mt-4">
                    <v-label>Class</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.class"
                        >
                    </div>
                </div>

                <div v-if="! itemIsText() && ! itemIsHtml()" class="input-group mt-4">
                    <v-label>Required</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.required"
                        >
                            <option :selected="{ 'selected' : currentItem.required === 'no' }" value="no">
                                No
                            </option>
                            <option :selected="{ 'selected' : currentItem.required === 'yes' }" value="yes">
                                Yes
                            </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>

            <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}
    },
    data() {
        return {
            hasErrors : false,
            types : [
                'checkbox',
                'file',
                'html',
                'image',
                'input',
                'email',
                'select',
                'text',
                'textarea',
            ],
        }
    },
    methods : {
        itemIsInput() {
            return this.currentItem.type === 'input';
        },
        itemIsHtml() {
            return this.currentItem.type === 'html';
        },
        itemIsTextarea() {
            return this.currentItem.type === 'textarea';
        },
        itemIsEmail() {
            return this.currentItem.type === 'email';
        },
        itemIsSelect() {
            return this.currentItem.type === 'select';
        },
        itemIsText() {
            return this.currentItem.type === 'text';
        },
        itemHasLabel() {
            return this.currentItem.label;
        },
        itemHasName() {
            return this.currentItem.name;
        },
        itemHasOptions() {
            return this.currentItem.options;
        },
        newItem() {
            this.$emit('newItem');
        },
        saveItem() {
            this.hasErrors = false;
            if (! this.itemHasLabel() && ! this.itemIsHtml()) {
                return this.hasErrors = true;
            }
            if (! this.itemIsText() && ! this.itemHasName() && ! this.itemIsHtml()) {
                return this.hasErrors = true;
            }
            if (this.itemIsSelect() && ! this.itemHasOptions() && ! this.itemIsHtml()) {
                return this.hasErrors = true;
            }

            this.$emit('saveItem', this.currentItem);
        },
    }
}
</script>
