<template>
    <div class="row  align-items-center">
        <div class="col">
            <div class="row" v-if="!isEdit">
                <div class="col">
                    <div class="row align-items-center">
                        <div class="col-auto p-r-0" v-if="!editable"><div class="icon-thumbnail icon-35 mr-0 bg-master-lightest light">{{index + 1}}</div></div>
                        <div class="col-auto" v-if="editable">
                            <div @click="$emit('remove')" class="pointer">
                                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
                                     width="25" height="25"
                                     viewBox="0 0 172 172"
                                     style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#e74c3c"><path d="M18.87987,153.12013c2.23887,2.23819 5.86807,2.23819 8.10693,0l59.0132,-59.0132l59.0132,59.0132c2.24964,2.17277 5.82555,2.1417 8.03709,-0.06984c2.21154,-2.21154 2.24261,-5.78745 0.06984,-8.03709l-59.0132,-59.0132l59.0132,-59.0132c1.49042,-1.43949 2.08815,-3.57117 1.56346,-5.57571c-0.52469,-2.00454 -2.09015,-3.57 -4.09469,-4.09469c-2.00454,-0.52469 -4.13622,0.07305 -5.57571,1.56346l-59.0132,59.0132l-59.0132,-59.0132c-2.24964,-2.17277 -5.82555,-2.1417 -8.03709,0.06984c-2.21154,2.21154 -2.24261,5.78745 -0.06984,8.03709l59.0132,59.0132l-59.0132,59.0132c-2.23819,2.23887 -2.23819,5.86807 0,8.10693z"></path></g></g></svg>
                            </div>
                        </div>
                        <div class="col-auto bg-master-lightest padding-20 d-none d-sm-inline hide">
                            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
                                 width="20" height="20"
                                 viewBox="0 0 172 172"
                                 style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#cccccc"><path d="M17.2,37.84c-5.65719,0 -10.32,4.66281 -10.32,10.32v75.68c0,5.65719 4.66281,10.32 10.32,10.32h101.38594c4.31344,0 8.47906,-1.6125 11.65031,-4.54187l0.14781,-0.13438l31.86031,-36.34844l-0.14781,0.16125c4.00437,-4.00438 4.00437,-10.58875 0,-14.59313l0.16125,0.16125l-31.87375,-36.34844l-0.14781,-0.13437c-3.17125,-2.91594 -7.33687,-4.54188 -11.65031,-4.54188zM17.2,44.72h101.38594c2.58,0 5.0525,0.98094 6.96063,2.70094l31.605,36.06625l0.08062,0.08063c1.37063,1.37062 1.37063,3.49375 0,4.86437l-0.08062,0.08063l-31.605,36.05281c-1.90813,1.73344 -4.38063,2.71437 -6.96063,2.71437h-101.38594c-1.935,0 -3.44,-1.505 -3.44,-3.44v-75.68c0,-1.94844 1.49156,-3.44 3.44,-3.44zM127.28,72.24c-7.56531,0 -13.76,6.19469 -13.76,13.76c0,7.56531 6.19469,13.76 13.76,13.76c7.56531,0 13.76,-6.19469 13.76,-13.76c0,-7.56531 -6.19469,-13.76 -13.76,-13.76zM127.28,79.12c3.84313,0 6.88,3.03688 6.88,6.88c0,3.84313 -3.03687,6.88 -6.88,6.88c-3.84312,0 -6.88,-3.03687 -6.88,-6.88c0,-3.84312 3.03688,-6.88 6.88,-6.88z"></path></g></g></svg>
                        </div>
                        <div class="col">
                            <div class="row">
                                <div class="col">
                                    <p class="no-margin bold fs-12">{{product.description}}</p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">
                                    <p class="muted m-b-0">{{product.stockCode}}</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-md-7 mt-2 mt-md-0">
                            <div class="row align-items-center">
                                <div class="col-auto">
                                    <p class="m-b-0 small muted">Unit Price</p>
                                    <p class="m-b-0 bold">{{product.unit_price}}</p>
                                </div>
                                <div class="col-auto text-center">
                                    <p class="m-b-0 small muted">Quantity</p>
                                    <p class="m-b-0 bold">{{product.quantity}}</p>
                                </div>
                                <div class="col text-right">
                                    <p class="m-b-0 small muted">Total</p>
                                    <p class="m-b-0 bold text-success">{{currency}} {{(Math.round((productTotal + Number.EPSILON) * 100) / 100).toFixed(2)}}</p>
                                    <p class="m-b-0 text-complete text-underline pointer" v-if="editable" @click="isEdit = !isEdit">Edit this item?</p>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" v-if="isEdit">
                <div class="col padding-25 bg-master-lightest">
                    <div class="row">
                        <div class="col-4 p-r-5">
                            <div class="form-group form-group-default b-rad-none">
                                <label>Stock Code</label>
                                <input id="stock_code" name="stock_code"  type="text" class="form-control b-rad-none" v-model="product.stockCode" />
                            </div>
                        </div>
                        <div class="col p-l-5">
                            <div class="form-group form-group-default b-rad-none required">
                                <label>description</label>
                                <input id="desc" name="desc" class="form-control b-rad-none" rows="1" @keyup="onlyEnglish($event)" v-model="product.description">
                            </div>
                        </div>
                    </div>
                    <div class="row align-items-center">
                        <div class="col-6 p-r-5">
                            <div class="form-group form-group-default b-rad-none required">
                                <label>Unit Price</label>
                                <input id="unit_price" name="unit_price" type="text" class="form-control b-rad-none" placeholder="Unit Price" v-model.lazy="product.unit_price" v-money="productPrice" />
                            </div>
                        </div>
                        <div class="col-6 p-l-5">
                            <div class="form-group form-group-default b-rad-none no-padding no-border">
                                <div class="row no-margin">
                                    <div id="minus-quantity" name="minus-quantity" class="col-auto bg-master-lighter pointer" @mousedown="updateQuantity" @mouseleave="clearInterval" @mouseup="clearInterval" @touchstart="updateQuantity" @touchend="clearInterval" @touchcancel="clearInterval">
                                        <div class="row h-100 align-items-center">
                                            <div class="col">
                                                <i class="fa fa-minus"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col no-padding">
                                        <label class="p-t-5 p-l-5 text-center">Quantity</label>
                                        <input id="quantity" name="quantity" type="text" class="form-control m-b-5 b-rad-none no-border text-center" v-model.lazy="product.quantity" v-mask="'#########'"/>
                                    </div>
                                    <div id="add-quantity" name="add-quantity" class="col-auto bg-master-lighter pointer" @mousedown="updateQuantity('add')" @mouseleave="clearInterval" @mouseup="clearInterval" @touchstart="updateQuantity('add')" @touchend="clearInterval" @touchcancel="clearInterval">
                                        <div class="row h-100 align-items-center">
                                            <div class="col">
                                                <i class="fa fa-plus"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-5">
                            <p class="m-b-0 small">Total</p>
                            <h6 class="no-margin bold text-complete">{{currency}} {{productTotal.toFixed(3)}}</h6>
                        </div>
                        <div class="col text-right">
                            <button class="btn btn-lg btn-outline-success b-rad-none" @click="updateProduct()">Save Changes</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import formHandler from '../../../general/mixins/formHandler';
    export default {
        props: {
            editable: {
                type: Boolean,
                default: false
            },
            currency:{
                type: String,
                required: true
            },
            index:{
                type: Number,
                required: true
            }
        },
        data(){
            return {
                isEdit: false,
                product: {
                    stockCode: '',
                    description: '',
                    unit_price: 0,
                },
                products: []
            }
        },
        created() {
            this.product = this.data;
            this.product.unit_price = (Math.round((this.product.unit_price+ Number.EPSILON) * 1000) / 1000).toFixed(3)
        },
        computed: {
            productTotal(){
                return this.product.quantity * parseFloat((this.product.unit_price).toString().replace(',', ''));
            },
        },
        methods: {
            updateQuantity(type){
                if(!this.interval){
                    this.interval = setInterval(() => type === 'add' ? this.product.quantity++ : this.product.quantity > 1 ? this.product.quantity--:null , 80)
                }
            },
            clearInterval(){
                clearInterval(this.interval);
                this.interval = false;
            },
            updateProduct(){
                this.isEdit = !this.isEdit;

                this.$emit('change', {
                  stockCode: this.product.stockCode,
                  description: this.product.description,
                  quantity: this.product.quantity,
                  unit_price: parseFloat((this.product.unit_price).toString().replace(',', '')),
                  total: this.productTotal
              }, this.index);
            },
            onlyEnglish(event){
                let value = event.target.value,
                    regex = /^[^~`!@#$%^&*()_+=[\]\{}|;':",.\/<>?a-zA-Z0-9-]+$/;

                event.preventDefault();

                if(regex.test(value)){
                    this.product.description = value.replace(regex, '');
                }
            },
        },
        mixins: [formHandler]
    }
</script>
