<template>
  <div class="select-box">
    <div :class="`label-top`">
      <slot name="label" />
      <div
        class="select-box__current"
        tabindex="1"
        :class="{
          disabled: disabled, 
          readonly: readonly,
          error: error
        }"
      >
        <div v-for="(item, index) in list" :key="index" class="select-box__value">
          <input
            class="select-box__input"
            type="radio"
            :id="item.id"
            :value="item.value"
            v-model="dataModel"
            @change="handleUpdate()"
            :name="name"
          />
          <p
            class="select-box__input-text"
            :class="{ 'select-box__placeholder': item.placeholder }"
          >
            {{
              dataModel
                ? getValueLabel().label
                  ? getValueLabel().label
                  : item.name
                : item.label
                ? item.label
                : item.value
            }}
            <span v-if="labelValue">{{ item.value }}</span>
          </p>
        </div>
        <base-icon
          iconName="expand_more"
          class="select-box__icon"
          height="20"
          width="20"
          color="#59636E"
        />
      </div>
      <ul class="select-box__list">
        <li v-for="(item, index) in selectList" :key="index">
          <label
            class="flex select-box__option justify-between items-center"
            :class="{
              'select-active': item.value == dataModel && item.value,
              'select-box__placeholder': item.placeholder,
            }"
            :for="item.id"
            aria-hidden="aria-hidden"
          >
            {{ item.label }}
            <div v-if="item.name" class="select-box__item-name">
              {{ item.name }}
            </div>
          </label>
        </li>
      </ul>
      <div
        v-if="message"
        class="helper-text"
        :class="{ 'error-helper': error }"
      >
        <base-icon
          v-if="errorIcon"
          width="16"
          height="16"
          class="mr-1"
          :iconName="errorIcon" color="#e03021" 
        />  {{ message }}
      </div>
    </div>
  </div>
</template>

<script>
import BaseIcon from "@/components/Base/BaseIcon";

export default {
  components: {
    BaseIcon,
  },
  props: {
    list: {
      type: [Array],
    },
    modelValue: {
      type: [Array, Object, String, Number, Boolean],
    },
    name: {
      type: [String],
      required: true,
    },
    labelValue: {
      type: [Boolean],
      default: false,
    },
    disabled: {
      type: [Boolean],
      default: false
    },
    readonly: {
      type: [Boolean],
      default: false
    },
    error: {
      type: [Boolean],
      default: false,
    },
    errorIcon: {
      type: [String],
      default: "",
    },
    message: {
      type: [String],
      default: "",
    },
    placeholder: {
      type: [String],
      default: "",
    },
    labelPosition: {
      type: [String],
      validator: function (value) {
        return ["left", "top"].indexOf(value) !== -1;
      },
    },
  },
  computed: {
    selectList() {
      return this.dataList.filter((i) => i.hidden != true);
    },
  },
  watch: {
    modelValue(newVal) {
      this.dataModel = newVal;
    },
    list() {
      this.dataList = this.list
      this.addPlaceholder()
    }
  },
  data() {
    return {
      dataModel: null,
      dataList: []
    };
  },
  mounted() {
    this.dataList = this.list
    this.addPlaceholder()
    this.dataModel = this.modelValue;
  },
  methods: {
    handleUpdate() {
      this.$emit("valueChanged", this.dataModel);
      this.$emit("update:modelValue", this.dataModel);
    },
    getValueLabel() {
      let _this = this;
      let dataLabel = this.dataList.filter(function (str) {
        return str.value == _this.modelValue;
      });
      if (dataLabel.length != 0) {
        return dataLabel[0];
      } else {
        return this.dataList[0]
      }
    },
    addPlaceholder() {
      if (this.placeholder) {
        let checkPlaceholder = this.dataList.filter(str => {
          return str.placeholder
        })
        if (checkPlaceholder.length == 0) {
          this.dataList.unshift({
            id: this.name + 0,
            label: this.placeholder,
            value: "",
            placeholder: true,
          })
        }
      }
    }
  },
};
</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;

  .disabled {
    pointer-events: none;
    .select-box__input-text {
      background: #f5f6f7;
    }
  }

  .readonly {
    pointer-events: none;
  }

  &__current {
    position: relative;
    box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    outline: none;
    border: 1px solid $neutral-2;
    border-radius: 6px;
    min-height: 35px;

    &:focus {
      & + .select-box__list {
        opacity: 1;

        // We have to set "animation-name: none;" to make the list visible (read below how it works)
        animation-name: none;
        .select-box__option {
          cursor: pointer;
        }
      }

      .select-box__icon {
        transform: translateY(-50%) rotate(180deg);
      }
    }
  }

  &__icon {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    width: 20px;
    transition: 0.2s ease;
  }

  &__value {
    display: flex;
  }

  &__input {
    display: none;

    &:checked + .select-box__input-text {
      display: block;
    }
  }

  &__input-text {
    display: none;
    width: 100%;
    margin: 0;
    padding: 8px 16px;
    padding-right: 40px;
    background-color: #fff;
    border-radius: 6px;
    color: $neutral-6;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;

    span {
      margin-top: 1px;
      font-weight: normal;
    }
  }

  &__list {
    position: absolute;
    width: calc(100% - 2px);
    list-style: none;
    opacity: 0;
    animation-name: HideList;
    animation-duration: 0.5s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
    animation-timing-function: step-start;
    top: 0px;
    margin: 0px;
    border: 1px solid $neutral-2;
    box-shadow: 0px 1px 6px rgba(11, 60, 93, 0.12),
      0px 4px 18px 3px rgba(46, 50, 52, 0.08);
    border-radius: 6px;
    padding: 4px 0;
    background: #fff;
    max-height: 450px;
    overflow: auto;
    min-width: fit-content;
    z-index: 9;
  }

  /* width */
  &__list::-webkit-scrollbar {
    width: 8px;
  }
  /* Track */
  &__list::-webkit-scrollbar-track {
    background: $neutral-2;
    border-radius: 0px 6px 6px 0px;
  }
  /* 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;

    &:focus,
    &.select-active {
      background-color: $dark-blue-4;
      color: $neutral-0;
    }

    &:hover {
      background-color: $dark-blue-2;
    }
  }

  &__placeholder {
    color: $neutral-2;
    font-weight: normal;
  }

  &__item-name {
    font-weight: normal;
  }

  .helper-text {
    font-size: 10px;
    margin-top: 4px;
    color: $neutral-6;
    display: flex;
    align-items: center;
  }

  .error {
    border-color: $critical-4;
  }

  .error-helper {
    color: $critical-4;
  }

  .label-top {
    display: flex;
    flex-flow: column;

    .typo-text {
      margin-bottom: 8px;
    }
  }
}

@keyframes HideList {
  from {
    transform: scaleY(1);
  }
  to {
    transform: scaleY(0);
  }
}
</style>
