<template>
    <div :id="item.id" class="mb-2" :class="{ selected : isSelected }">
        <input type="hidden" :name="'items[' + item.id + '][id]'" :value="item.id">
        <input type="hidden" :name="'items[' + item.id + '][sort_order]'" :value="item.sort_order">

        <div class="overflow-hidden shadow group"
             :class="isSelected ? 'bg-primary-100' : 'bg-white hover:bg-gray-100'"
        >
            <div class="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-sm font-medium leading-5 border border-transparent bg-gray-100 text-gray-800 handle cursor-move hover:border-blue-500 hover:bg-blue-100">
                        {{ item.sort_order }}
                    </span>
                </div>

                <div class="flex items-center space-x-2">
                    <span class="inline-block text-sm leading-5 font-medium text-gray-500 flex-shrink-0">
                        Area M2
                    </span>
                    <input
                        class="form-input block w-full rounded-sm sm:text-sm sm:leading-5"
                        :class="{'border-red-500': item.has_error}"
                        type="text"
                        :name="'items[' + item.id + '][area_m2]'"
                        :value="item.area_m2"
                        v-numeric
                        @click="editItem"
                        @blur="updateItemArea"
                    >
                </div>

                <div class="flex items-center space-x-2">
                    <span class="inline-block text-sm leading-5 font-medium text-gray-500 flex-shrink-0">
                        Cost M2
                    </span>
                    <input
                        class="form-input block w-full rounded-sm sm:text-sm sm:leading-5"
                        :class="{'border-red-500': item.has_error}"
                        type="text"
                        :name="'items[' + item.id + '][cost_per_m2]'"
                        :value="item.cost_per_m2"
                        v-numeric
                        @click="editItem"
                        @blur="updateItemCost"
                    >
                </div>

                <div class="flex flex-shrink-0">
                    <span v-if="item.has_error" class="flex flex-shrink-0 font-bold text-red-500 text-xs">
                        {{ item.error_message }}
                    </span>
                    <span v-else-if="item.is_new" class="flex flex-shrink-0 font-bold text-orange-500 text-xs">
                        (New Item)
                    </span>
                    <span v-else-if="item.is_dirty" class="flex flex-shrink-0 font-bold text-red-500 text-xs">
                        (Unsaved Changes)
                    </span>
                </div>

                <div class="md:flex md:flex-1 md:justify-end">
                    <button
                        class="inline-flex space-x-2 items-center px-4 py-2 border text-sm leading-5 font-medium rounded-sm text-red-500 transition duration-150 ease-in-out bg-transparent border-red-500 md:space-x-0 hover:bg-red-500 hover:text-white focus:outline-none focus:shadow-outline-red focus:border-red-600 active:bg-red-600"
                        title="Delete Item"
                        tabindex="-1"
                        @click.prevent="deleteItem"
                    >
                        <span>Delete</span>
                    </button>
                </div>

            </div>
        </div>

    </div>
</template>


<script>
import Draggable from 'vuedraggable';

export default {
    components : {
        Draggable,
    },
    props : {
        index : null,
        item : null,
        existingItem : null
    },
    data() {
        return {}
    },
    computed : {
        isSelected() {
            return (this.existingItem && this.existingItem.id === this.item.id);
        },
    },
    methods : {
        updateItemArea(event) {
            let newValue = parseFloat(event.target.value);
            let existingValue = parseFloat(this.item.area_m2);

            if (this.isInvalid(newValue)) {
                this.item.area_m2 = null;
                this.item.has_error = true;
                this.item.error_message = 'Area M2 must be a positive number';
            } else {
                this.resetValidation();

                if (newValue !== existingValue) {
                    this.item.is_dirty = true;
                    this.item.area_m2 = newValue;
                    this.$emit('updateItem', this.item);
                }
            }
        },
        updateItemCost(event) {
            let newValue = parseFloat(event.target.value);
            let existingValue = parseFloat(this.item.cost_per_m2);

            if (this.isInvalid(newValue)) {
                this.item.cost_per_m2 = null;
                this.item.has_error = true;
                this.item.error_message = 'Cost M2 must be a positive number';
            } else {
                this.resetValidation();

                if (newValue !== existingValue) {
                    this.item.is_dirty = true;
                    this.item.cost_per_m2 = newValue;
                    this.$emit('updateItem', this.item);
                }
            }
        },
        resetValidation() {
            this.item.has_error = false;
            this.item.error_message = null;
        },
        isInvalid(input) {
            return input === ''
                || input === null
                || input === undefined
                || isNaN(input)
                || parseFloat(input) <= 0;
        },
        editItem() {
            this.$emit('editItem', this.item);
        },
        deleteItem() {
            this.$emit('deleteItem', this.item);
        },
    }
}
</script>
