<template>
    <transition name="slide-fade" mode="out-in">
        <div class="overflow-hidden shadow group bg-white hover:bg-gray-100">
            <div class="menu-builder-form w-full px-4 py-3 space-y-4 md:flex md:items-center md:space-x-4 md:space-y-0">
                <div>
                    <span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium leading-5 bg-green-100 text-green-500">
                        <span class="h-5 w-4 hidden md:inline-flex md:items-center md:justify-center">
                            <svg data-slot="icon" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path>
                            </svg>
                        </span>
                        <span class="md:hidden">New</span>
                    </span>
                </div>

                <div>
                    <div class="w-full flex items-center space-x-2">
                        <v-label class="flex-shrink-0">Area M2</v-label>
                        <input
                            class="form-input block w-full rounded-sm sm:text-sm sm:leading-5"
                            type="text"
                            v-numeric
                            v-model="newItem.area_m2"
                        >
                    </div>
                    <div v-if="hasErrors && ! itemHasAreaM2()" class="text-right">
                        <v-error>Item area m2 is required</v-error>
                    </div>
                </div>

                <div>
                    <div class="w-full flex items-center space-x-2">
                        <v-label class="flex-shrink-0">Price</v-label>
                        <input
                            class="form-input block w-full rounded-sm sm:text-sm sm:leading-5"
                            type="text"
                            v-numeric
                            v-model="newItem.cost_per_m2"
                        >
                    </div>
                    <div v-if="hasErrors && ! itemHasCostM2()" class="text-right" >
                        <v-error>Item price is required</v-error>
                    </div>
                </div>

                <div class="flex flex-shrink-0">
                    <span v-if="newItem.has_error" class="flex flex-shrink-0 font-bold text-red-500 text-xs">
                        {{ newItem.error_message }}
                    </span>
                </div>

                <div class="md:flex md:flex-1 md:justify-end">
                    <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 bg-green-400 hover:bg-green-500 focus:outline-none focus:shadow-outline-green focus:border-green-600 active:bg-green-600"
                        title="Create Item"
                        @click.prevent="createItem"
                    >
                        Create
                    </button>
                </div>
            </div>
        </div>
    </transition>
</template>


<script>
export default {
    props : {
        mode : {type : String},
        newItem : {type : Object},
    },
    data() {
        return {
            hasErrors : false,
        }
    },
    computed : {},
    methods : {
        itemHasAreaM2() {
            return this.newItem.area_m2;
        },
        itemHasCostM2() {
            return this.newItem.cost_per_m2;
        },
        createItem() {
            this.hasErrors = false;
            this.newItem.has_error = false;
            this.newItem.error_message = null;

            if (! this.itemHasAreaM2()) {
                return this.hasErrors = true;
            }
            if (! this.itemHasCostM2()) {
                return this.hasErrors = true;
            }

            this.$emit('createItem', this.newItem);
        }
    },
    watch : {},
    mounted() {}
}
</script>
