<template>
  <div :class="[{ disabled: disabled }, { opened: opened }]" class="select">
    <div
      @click="toggle"
      style="width: inherit"
      class="select-label mr-auto value-dropdown-company"
      :class="[
        { 'card-view': cardStyle, 'active-dropdown': opened }
      ]"
    >
      <slot name="label" :opened="opened"> </slot>
    </div>
    <div
      class="select-options list-plan"
      :class="[{ 'card-options': cardStyle }]"
    >
      <div
        v-if="searchAble.length > 0 && options.length > 1"
        class="search-container flex"
      >
        <input
          style="width: 100%"
          class="select-label mr-2"
          placeholder="Nama Perusahaan / NPWP"
          v-model="keyword"
          v-on:keyup.enter="onEnter"
        />
        <base-icon 
          class="tool--icon c-pointer ml-auto"
          iconName="search"
        />
      </div>
      <div
        v-if="filtredOptions.length < 1"
        class="select-option text-regular"
        :class="[{ 'card-option': cardStyle }]"
        style="color: #505154; font-weight: bold; text-align: center"
      >
        <p class="text-black">{{ emptyListMsg }}</p>
      </div>
      <div
        v-else
        v-for="option in filtredOptions"
        :key="option.companyId"
        @click="change(option)"
        class="select-option"
        :class="[{ 'card-option': cardStyle }]"
      >
        <slot name="list" :item="option">
          <p class="text-black">{{ option.companyName }}</p>
        </slot>
      </div>
    </div>
    <div v-if="opened" @click="toggle" class="select-overlay"></div>
  </div>
</template>

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

export default {
  name: "base-select",
  components: {
    BaseIcon
  },
  props: {
    options: {
      type: Array,
      required: true,
    },
    onChange: {
      type: Function,
      required: false,
    },
    disabled: {
      default: false,
      type: Boolean,
    },
    cardStyle: {
      default: false,
      type: Boolean,
    },
    searchAble: {
      default: () => [],
      type: Array,
    },
    emptyListMsg: {
      default: "Data tidak ditemukan",
      type: String,
    },
  },
  data() {
    return {
      opened: false,
      keyword: "",
    };
  },
  computed: {
    filtredOptions() {
      if (this.searchAble.length < 1) return this.options;
      return this.options.filter((item) => {
        return this.searchAble.some((list) => {
          return item[list]
            ? item[list].toLowerCase().includes(this.keyword.toLowerCase())
            : false;
        });
      });
    },
  },
  methods: {
    change(opt) {
      this.$emit("input", opt);
      this.opened = false;

      if (this.onChange !== undefined) {
        this.onChange(opt);
      }
    },
    toggle() {
      if (this.disabled) {
        return;
      }
      this.opened = !this.opened;
    },
  },
};
</script>
<style lang="scss">
.select {
  font-size: 15px;
  display: flex;
  position: relative;
  justify-content: center;
  cursor: pointer;
  .value-dropdown-company:hover,
  .active-dropdown {
    border-color: #3e7dc0 !important;
  }
  .card-view {
    padding: 8px 16px;
    border: 1px solid #d4d7d8;
    border-radius: 6px;
  }
  .search-container {
    margin: 12px 16px;
    padding: 10px;
    border: 1px solid #b3b3b4;
    border-radius: 8px;

    input {
      border: none;
      outline: none;
    }
  }
  * {
    box-sizing: border-box;
  }
  &-options {
    font-size: 14px;
    position: absolute;
    z-index: 1001;
    top: 0%;
    opacity: 0;
    margin-top: 10px;
    width: 100%;
    height: 0;
    max-height: 0;
    overflow: hidden;
    background-color: #ffffff;
    // border-radius: 0px 0px 8px 8px;
    box-shadow: 6px 6px 10px #e8e8e8;
    transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    z-index: -99;
  }
  .card-options {
    font-size: 14px;
    position: absolute;
    z-index: 1001;
    top: 0%;
    opacity: 0;
    margin-top: 10px;
    width: 100%;
    max-width: 350px;
    height: 0;
    max-height: 0;
    overflow: hidden;
    background-color: #ffffff;
    // border-radius: 0px 0px 8px 8px;
    box-shadow: 6px 6px 10px #e8e8e8;
    transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    z-index: -99;

    box-sizing: border-box;

    /* Auto layout */

    padding: 0px;

    /* White */

    background: #ffffff;
    /* Black 3 */

    border: 1px solid #b3b3b4;
    /* Shadow Menu */

    box-shadow: 2px 4px 8px rgba(221, 221, 221, 0.5);
    border-radius: 8px;
  }
  &-option {
    cursor: pointer;
    top: 100%;
  }
  &-option:hover {
    background-color: rgba(62, 125, 192, 0.2);
  }
  .card-option {
    cursor: pointer;
    padding: 12px 16px;
    top: 100%;
  }
  &-overlay {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 1000;
  }
  &.disabled {
    opacity: 0.5;
    .select-label {
      div {
        cursor: not-allowed;
      }
    }
  }
  &.disabled &-label:hover {
    color: #4c4c4c;
    cursor: default;
  }
}
.select.opened {
  .select-options {
    top: 100%;
    opacity: 1;
    z-index: 999999;
    height: max-content;
    max-height: 200px;
    overflow: auto;
  }
  .card-options {
    top: 100%;
    opacity: 1;
    z-index: 999999;
    height: max-content;
    max-height: 200px;
    overflow: auto;
  }
}
</style>
