<template>
  <ul class="select-box__list">
    <li v-if="dataList.length == 0">
      <label
        class="flex justify-center select-box__option select-box__empty"
        aria-hidden="aria-hidden"
      >
        Data tidak ditemukan
      </label>
    </li>
    <li v-for="(item, index) in dataList" :key="index">
      <label
        class="flex select-box__option items-start"
        :class="{
          'select-active': item.value == valueSearch && item.value,
          'justify-between': !item.code
        }"
        :for="index"
        aria-hidden="aria-hidden"
        @click="clickItemList(item)"
      >
        <div v-if="item.code" class="tag-code">
          {{ item.code }}
        </div> 
        <div class="pr-3 text-left">
          {{ item.label }} <span v-if="item.tagLabel" class="tag-label">{{ item.tagLabel }}</span>
        </div>
        <div v-if="item.name" class="select-box__item-name">
          <span class="label-tag" v-if="item.tag">{{ item.tag }}</span> {{ item.name }}
        </div>
      </label>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    list: {
      type: [Array],
    },
    modelValue: {
      type: [Array, Object, String, Number, Boolean],
    },
  },
  data() {
    return {
      dataList: [],
      valueSearch: ""
    };
  },
  watch: {
    modelValue(newVal) {
      let _this = this;
      if (newVal) {
        this.dataList = _this.list.filter((list) =>
          list.label.toLowerCase().includes(this.modelValue.toLowerCase()) || 
          String(list.name).toLowerCase().includes(this.modelValue.toLowerCase())
        );
      } else {
        this.dataList = this.list
        this.handleValue({value: ""})
      }
    },
    list(newVal) {
      this.dataList = newVal;
    }
  },
  mounted() {
    this.dataList = this.list;
  },
  methods: {
    clickItemList(value) {
      this.handleValue(value)
      this.$emit("update:modelValue", value.label);
    },
    handleValue(value) {
      this.valueSearch = value.value
      this.$emit("handleValue", value.value)
    }
  },
};
</script>

<style lang="scss" scoped>
@use "@/assets/style/_color.scss" as *;

.select-box {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 auto;
  font-size: 14px;

  &__list {
    position: absolute;
    width: calc(100% - 2px);
    padding: 0;
    list-style: none;
    opacity: 1;
    animation-duration: 0.5s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
    animation-timing-function: step-start;
    top: 0px;
    margin: 0px;
    padding: 4px 0;
    background: #fff;
    max-height: 200px;
    overflow: auto;
    z-index: 9;

    .tag-code {
      background: #F9F9F9;
      padding: 4px 6.5px;
      border-radius: 4px;
      margin-right: 8px;
      font-weight: 900;
    }

    .tag-label {
      font-size: 12px;
      font-weight: 900;
      background: #DBDBDB;
      padding: 4px 8px;
      border-radius: 4px;
      margin-left: 8px;
    }
  }

  /* width */
  &__list::-webkit-scrollbar {
    width: 8px;
  }
  /* Track */
  &__list::-webkit-scrollbar-track {
    background: $neutral-2;
    border-radius: 6px;
  }
  /* Handle */
  &__list::-webkit-scrollbar-thumb {
    background: $neutral-3;
    border-radius: 20px;
  }
  /* Handle on hover */
  &__list::-webkit-scrollbar-thumb:hover {
    background: #555;
  }

  &__option {
    padding: 12px 16px;
    background-color: #fff;
    color: $neutral-6;
    transition: all 0.3s;
    font-weight: bold;
    cursor: pointer;
    line-break: auto;
    text-align: right;

    &:hover,
    &:focus,
    &.select-active {
      background-color: $neutral-1;
    }
  }

  &__item-name {
    font-weight: normal;

    .label-tag {
      background: #DBDBDB;
      font-size: 12px;
      padding: 4px 8px;
      border-radius: 4px;
      color: #B3B3B4;
      font-weight: 700;
      margin-right: 20px;
    }
  }

  &__empty {
    font-weight: normal;
  }
}
</style>
