<template>
  <div class="app-selector relative">
    <div class="selector-input border pl-2 border-app-white w-48 py-2 rounded flex justify-around align-middle items-center" @click="toggleOptions">
        <div class="input-value flex-grow text-xs"> 
                <div class="flex align-middle">
                    <div v-if="selectedItem.icon" class="flex-grow-0 self-center">
                        <app-icon :type="'icon-'+selectedItem.icon" customize size='text-lg'></app-icon>
                    </div>
                    <div class='flex-grow self-center'>{{selectedValue}}</div> 
                </div>
            </div>
        <div class="input-icon flex align-middle opacity-60 flex-grow-0">
            <app-icon :type="open?'up':'down'" size='text-xs'></app-icon>
        </div>

    </div>
        <transition :css="false" @enter='handleEnter' @leave='handleLeave'>
            <div class="item-list w-48 fixed" v-if="open">
                <section v-for="i in listArr"  :key ='i.value' class="item border border-app-dark-4 bg-opacity-95 bg-app-dark-3 text-app-dark-4 py-2 px-2 s-3" @click="selected(i)">{{i.text}}</section>
            </div>
        </transition>
  </div>
</template>

<script lang="ts">
import anime, { AnimeInstance} from 'animejs'
import Vue,{PropType} from 'vue';


const options = {
//   delay: (el:any, i:number) =>  i * 100,
  duration: 500,
  easing: "easeOutCubic"
}
interface Item {
    text:string,
    value?:number,
    icon?:string
}

export default Vue.extend({
  name: 'app-selector',
  data(){
      return{
          open:false,
        //   uiAnime: {} as AnimeInstance,
        selectedItem:{},
        selectedValue:'',
        coinIcon:''
      }
  },

    props:{
        listArr:{
            type: Array as PropType<Item[]>,
            required: true
        },
        defaultItem:{
            type: Boolean,
            default:false
        }
    },
    components:{
        'app-icon':()=>import('@/components/Icon.vue')
    },
    mounted(){
        if(this.defaultItem){
            this.selectedItem = this.listArr[0]
            this.selectedValue = this.listArr[0].text
            this.$emit('selected', this.selectedItem)
        }
    },
    methods:{
        handleEnter(el:any,done:any){
            const section =
            Array.from(el.querySelectorAll('section'))
            anime({
                targets:section,
                tanslateY:[-50,0],
                opacity:[0,1],
                ...options,
                complete:done
            })
        },
            handleLeave: (el:any, done:any) => {
                const sections = Array.from(el.querySelectorAll("section"))
                anime({
                    targets: sections.reverse(),
                    translateY: 0,
                    opacity: 0,
                    ...options,
                    complete: done
                })
    },
    selected(item:any){
        if(item.text === this.selectedValue){
            this.open = !this.open;
            return;
        }
        this.selectedValue = item.text
        this.selectedItem = item
        this.$emit('selected', item)
        if(this.open){
            this.open = !this.open
        }
    },

    toggleOptions(){
        this.open = !this.open
    },


    }
});
</script>

