<template>
  <div class="relative c-select">
    <div
      class="select flex items-center justify-between cursor-pointer overflow-hidden"
      :class="{ 'select-small': size === 'small' }"
      ref="select"
    >
      <div
        class="selected-txt flex-grow overflow-hidden overflow-ellipsis"
        :class="{ 'selected-txt-small': size === 'small' }"
      >
        {{
          selectedOptionName === undefined
            ? $t('lang.address.pleaseSelect')
            : selectedOptionName
        }}
      </div>
      <img
        src="@/assets/images/blockChainBrowser/address/arrow-down.png"
        alt=""
        class="arrow transition-transform transform"
        :class="{ 'rotate-180': open }"
      />
    </div>
    <div
      class="options absolute top-full transition-all mt-1"
      :class="{
        ' right-0': optionPosition === 'right',
      }"
      v-show="open"
    >
      <div class="overflow-auto h-full" style="max-height: 200px;">
        <div class="search flex items-center" ref="searchBox">
          <input
            type="text"
            v-model="filterValue"
            :placeholder="searchPlaceholder"
            class="outline-none mx-2 w-full"
          />
        </div>
        <div
          class="option-item"
          v-for="option in filteredOptionsList"
          :key="option.value"
          :class="{ 'option-item-selected': option.value === selectedValue }"
          @click="$emit('change', option.value)"
        >
          {{ option.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue, { PropType } from 'vue'
export default Vue.extend({
  props: {
    size: {
      type: String as PropType<'big' | 'small'>,
      default: 'big',
    },
    optionPosition: {
      type: String as PropType<'left' | 'right'>,
      default: 'left',
    },
    searchPlaceholder: {
      type: String,
    },
    selectedValue: [String, Number],
    optionsList: {
      type: Array as PropType<{ name: string; value: any }[]>,
      default() {
        return []
      },
    },
  },
  data() {
    return {
      open: false,
      filterValue: '',
    }
  },
  computed: {
    selectedOptionName() {
      return this.optionsList.find((i) => i.value === this.selectedValue)?.value
    },
    filteredOptionsList(): any[] {
      if (this.filterValue === '') {
        return this.optionsList
      } else {
        return this.optionsList.filter(
          (i) => i.name.indexOf(this.filterValue) !== -1,
        )
      }
    },
  },
  mounted() {
    window.addEventListener('click', this.foo)
  },
  beforeDestroy() {
    window.removeEventListener('click', this.foo)
  },
  methods: {
    foo(e: Event) {
      const clickOutSide = !(this.$refs.select as HTMLElement).contains(
        e.target as Node,
      )
      const clickSearchBox = (this.$refs.searchBox as HTMLElement).contains(
        e.target as Node,
      )
      if (clickSearchBox) {
        this.open = true
      } else {
        if (clickOutSide) {
          this.open = false
        } else {
          this.open = !this.open
        }
      }
    },
  },
})
</script>

<style scoped lang="scss">
.c-select {
  .selected-txt {
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
    margin-left: 10px;
    white-space: nowrap;
  }
  .selected-txt-small {
    font-size: 14px;
    margin-left: 5px;
  }
  .select {
    width: 100px;
    height: 40px;
    background: rgba(79, 221, 252, 0.8);
    border-radius: 4px;
    .arrow {
      width: 9px;
      height: 6px;
      margin: 0 10px;
    }
  }
  .select-small {
    width: 70px;
    height: 30px;
  }
  .options {
    width: 310px;
    background: #ffffff;
    box-shadow: 0px 2px 15px 0px rgba(31, 52, 112, 0.06);
    border-radius: 4px;
    .search {
      height: 30px;
      background: #ffffff;
      border-radius: 15px;
      border: 1px solid #d9dcde;
      margin: 10px 20px;
    }
    .option-item {
      height: 36px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #516379;
      padding-left: 20px;
      display: flex;
      align-items: center;
      cursor: pointer;
    }
    .option-item-selected {
      background: rgba(37, 69, 203, 0.03);
      color: #2545cb;
    }
  }
}
</style>
