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

            <div class="calendar-appointment-form" :key="currentItem.id">

                <v-label>Date</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="date"
                        v-model="currentItem.attributes.date"
                    >
                </div>
                <v-error v-if="hasErrors && ! hasDate(currentItem)">
                    Date is required
                </v-error>

                <v-label class="mt-4">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.attributes.name"
                    >
                </div>
                <v-error v-if="hasErrors && ! hasName(currentItem)">
                    Name is required
                </v-error>

                <v-label class="mt-4">Email</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="email"
                        v-model="currentItem.attributes.email"
                    >
                </div>
                <v-error v-if="hasErrors && ! hasEmail(currentItem)">
                    Email is required
                </v-error>

                <v-label class="mt-4">Notes</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"
                        rows="3"
                        v-model="currentItem.attributes.notes"
                    ></textarea>
                </div>

                <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.attributes.type"
                    >
                        <option
                            v-for="type in types"
                            :value="type"
                            :selected="{ 'selected' : isSameType(currentItem, 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>

                <v-label class="mt-4">Status</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.attributes.status"
                    >
                        <option
                            v-for="status in statuses"
                            :value="status"
                            :selected="{ 'selected' : isSameStatus(currentItem, status) }"
                        >
                            {{ status | 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>

            <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="createItem"
                        >
                            New Appointment
                        </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 {
    name : 'CalendarAppointmentForm',
    props : {
        mode : {type : String},
        currentItem : {type : Object},
    },
    data() {
        return {
            hasErrors : false,
            types : ['provisional', 'firm'],
            statuses : ['reserved', 'approved', 'rejected'],
        }
    },
    methods : {
        isNew(item) {
            return !item.id;
        },
        isSameType(item, type) {
            return item.attributes.type === type;
        },
        isSameStatus(item, status) {
            return item.attributes.status === status;
        },

        hasDate(item) {
            return item.attributes.date;
        },
        hasName(item) {
            return item.attributes.name;
        },
        hasEmail(item) {
            return item.attributes.email;
        },

        createItem() {
            window.EventBus.$emit('calendarAppointment:createItem');
        },
        saveItem() {
            this.hasErrors = false;

            if (!this.hasDate(this.currentItem)) {
                return this.hasErrors = true;
            }

            if (!this.hasName(this.currentItem)) {
                return this.hasErrors = true;
            }

            if (!this.hasEmail(this.currentItem)) {
                return this.hasErrors = true;
            }

            if (this.isNew(this.currentItem)) {
                window.EventBus.$emit('calendarAppointment:storeItem', {item : this.currentItem});

                return;
            }

            window.EventBus.$emit('calendarAppointment:updateItem', {item : this.currentItem});
        },
    },
}
</script>
