<template>
    <div class="form-floating" :class="wrapClass">
        <!-- Button trigger modal -->
        <!-- <button type="button" class="form-control btn btn-primary" @click="show=!show" v-if="selected.length>0">
        {{ label }}
        </button> -->
        <span  class="form-control" :class="formClass" v-if="selected && selected.length==0" @click="show=!show">
            <i class="fa fa-exclamation-triangle text-danger"></i> <span class="text-danger"> No Items selected,Tap to {{ title }}</span>
        </span>
        <span  class="form-control " :class="formClass" v-else @click="show=!show">
            <!-- <i class="fa fa-exclamation-triangle text-danger"></i> <span class="text-danger">No Selection</span -->
                <span class="badge rounded-pill bg-primary mx-1" v-for="opt,i in selected" :key="i">{{ opt.name }} 
                    <span v-if="subTexts.length>0"> 
                        <span class="px-1 rounded bg-dark text-white" v-for="s,i in subTexts" :key="i"> {{ prefix.get(s) }} {{ opt[s] }} {{ suffix.get(s) }}</span>
                    </span>                    
                </span> 
        </span>
        <label :class="labelClass">{{ label }}</label>
    </div>
     
        <!-- Modal -->
        <div class="modal fade bg-trans bg-gradient" :class="show? 'show d-block': ''" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content shadow">
                    <div class="modal-header justify-content-between">
                        <h5 class="modal-title " id="exampleModalLongTitle">{{ title }}</h5>
                        <button type="button" class="btn btn-secondary close " data-dismiss="modal" aria-label="Close" @click="show=!show">
                        <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-6 list-group ">
                                <div class="list-group-item list-group-item-action list-group-item-primary active" disabled>Options</div>
                                <div class="list-group-item list-group-item-action p-0 " 
                                        v-for="opt,i in options" :key="i" v-show="!selectedItems.includes(options[i])" @click.prevent="selectedItems.push(options[i])">
                                        {{ opt.name }} 
                                        <div v-if="subTexts.length>0"> 
                                            <b class="badge badge-pill bg-dark text-white" v-for="s,i in subTexts" :key="i"> 
                                                {{ prefix.get(s) }} {{ opt[s] }} {{ suffix.get(s) }}
                                            </b>
                                        </div>
                                        <taxLabels v-if="hasChildlabel" :taxes="opt.taxes"/>

                                    </div>
                            </div>
                            <div class="col-6 list-group">
                                <div class="list-group-item list-group-item-action list-group-item-success active" disabled>Selected</div>
                                <div class="list-group-item list-group-item-action p-0" @click.prevent="selectedItems.splice(i,1)"
                                        v-for="opt,i in selectedItems" :key="i" >
                                        {{ opt.name }} 
                                        <div v-if="subTexts.length>0"> 
                                            <b class="badge badge-pill bg-dark text-white" v-for="s,i in subTexts" :key="i"> 
                                                {{ prefix.get(s) }} {{ opt[s] }} {{ suffix.get(s) }}
                                            </b>
                                        </div>
                                        <taxLabels v-if="hasChildlabel" :taxes="opt.taxes"/>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="show=!show">Close</button>
                        <button type="button" class="btn btn-primary" @click.prevent="updateChoices()" >Update Selected</button>
                    </div>
                </div>
            </div>
        </div>
    
</template>

<script>
import taxLabels from './taxLabels.vue';
export default {
    components:{taxLabels},
    emits:['updateChoices'],
    props:{
        options:{type:Array,default:()=>[]},
        title:{type:String,default:"Select Choices"},
        selected:{type:Array,default:()=>[]},
        subTexts:{type:Array,default:()=>[]},  
        suffix:{type:Map,default:()=>new Map([])},
        prefix:{type:Map,default:()=>new Map([])},
        label:{ type:[String,Number], default:"Select Choices"},
        type:{ type:String, default:"text"},
        formClass:{ type:String, default:" "},
        placeholder:{ type:String, default:"value" },
        inputClass:{ type:String, default:" "},
        labelClass:{ type:String, default:" "},
        wrapClass:{ type:String, default:" "},
        hasChildlabel:{type:Boolean, default:false, required:true},
    },
    data(){
        return {
            show:false,
            selectedItems:this.selected,
        }
    },
    methods:{
        updateChoices(){
            this.$emit('updateChoices', this.selectedItems);
            this.show = false;            
        }
    },
    watch:{
        selected(n){
            this.selectedItems = n;
        }
    },
    mounted(){
        console.log(this.selected);
    }
}
</script>
<style scoped>
    .bg-trans{
        background-color: rgb(0 0 0 / 69%);
    }
    .list-group-item{
        cursor: pointer;
    }
    
</style>