<template>
  <div
    class="ws-state-select"
    :class="[{'round':round},{active:menuActive},{'is-error':errors&&errors.length},{'is-disabled':_disabled}]"
    v-click-outside="$_onClickOutside"
  >
    <a
      href="#"
      @click.prevent="$_onOpenClick()"
      class="ws-state-select__button"
    >
      <div
        v-if="value||value==0"
        class="ws-state-select__button-text"
      >{{_valueText}}</div>
      <div
        v-else
        class="ws-state-select__placeholder"
      >{{placeholder}}</div>
      <v-icon class="icon">mdi-menu-down</v-icon>
    </a>
    <div
      v-if="menuActive"
      class="ws-state-select__menu"
    >
      <!-- <div
        v-show="searchMode"
        class="ws-state-select__search-input-section"
      >
        <div class="ws-state-select__search-input">
          <v-icon class="icon">mdi-magnify</v-icon>
          <input
            ref="searchInput"
            type="text"
            v-model="searching"
          >
          <a
            @click.prevent="$_onInputClearClick()"
            class="search-input-clear-button"
          >
            <v-icon class="clear-icon">mdi-close-circle</v-icon>
          </a>
        </div>
      </div> -->
      <div class="ws-state-select__options">
        <a
          v-for="(item,itemIndex) in items"
          :key="itemIndex"
          href="#"
          @click.prevent="$_onOptionClick(item)"
          :class="{active:$_activeCheck(item)}"
        >
          <div
            v-show="multiple"
            class="checkbox"
          >
            <v-icon v-if="$_activeCheck(item)">mdi-checkbox-marked</v-icon>
            <v-icon v-else>mdi-checkbox-blank-outline</v-icon>
          </div>
          <p>{{item.text}}</p>
        </a>
      </div>
    </div>
    <!-- <v-menu
      max-height="200"
      v-model="menuActive"
      offset-y
    >
      <template v-slot:activator="{ on, attrs }">
        <div
          v-ripple="{class:'buttonRipple--text'}"
          v-bind="attrs"
          v-on="on"
          class="ws-state-select__button"
          :class="{'active':menuActive}"
        >
          <div
            v-if="value!=undefined"
            class="ws-state-select__input-content textPrimary--text"
          >{{_content}}</div>
          <div
            v-else
            class="ws-state-select__input-content textSecondary--text"
          >{{placeholder}}</div>
          <v-icon class="ws-state-select__input-icon textSecondary--text">mdi-menu-down</v-icon>
        </div>
      </template>
      <v-list class="pa-0">
        <v-list-item
          @click="$_onlistItemClick(item,index)"
          v-for="(item, index) in items"
          :key="index"
          v-ripple="{class:'buttonRipple--text'}"
        >
          <v-list-item-title class="textPrimary--text">{{ item.text }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-menu> -->
  </div>
</template>

<script>
export default {
  data: () => ({
    menuActive: false,
    // searching: "",
  }),
  methods: {
    $_onOpenClick() {
      this.menuActive = !this.menuActive;
    },
    $_activeCheck(item) {
      if (!this.value) {
        return;
      }
      if (this.multiple) {
        return this.value.includes(item.value);
      } else {
        return this.value == item.value;
      }
    },
    $_onOptionClick(item) {
      if (this.multiple) {
        const _value = this.value ? JSON.parse(JSON.stringify(this.value)) : [];
        const itemIndex = _value.findIndex((e) => {
          return e == item.value;
        });
        if (itemIndex >= 0) {
          _value.splice(itemIndex, 1);
        } else {
          _value.push(item.value);
        }
        this.$emit("input", _value);
      } else {
        this.$emit("input", item.value);
        this.menuActive = false;
      }
    },
    $_onClickOutside() {
      this.menuActive = false;
    },
  },
  computed: {
    _disabled() {
      if (this.parent && !this.parentState) {
        return true;
      } else if (
        this.requiredField &&
        (!this.requiredFieldState || this.requiredFieldState.length == 0)
      ) {
        return true;
      } else {
        return false;
      }
    },
    _valueText() {
      if (this.value === undefined) {
        return null;
      } else {
        if (this.multiple) {
          let _valueText = "";
          this.value.forEach((valueItem) => {
            const tarItem = this.items.find((e) => {
              return e.value == valueItem;
            });
            if (tarItem) {
              if (_valueText) {
                _valueText += `, ${tarItem.text}`;
              } else {
                _valueText += tarItem.text;
              }
            }
          });
          return _valueText;
        } else {
          const tarItem = this.items.find((e) => {
            return e.value == this.value;
          });
          if (!tarItem) {
            return null;
          } else {
            return tarItem.text;
          }
        }
      }
    },
  },
  props: {
    // searchMode: {
    //   type: Boolean,
    //   default: false,
    // },
    errors: {
      type: Array,
      default: null,
    },
    multiple: {
      type: Boolean,
      default: false,
    },
    round: {
      type: Boolean,
      default: true,
    },
    placeholder: {
      type: String,
      default: "select",
    },
    value: {
      type: [Number, String, Array, RegExp],
      default: null,
    },
    items: {
      type: Array,
      required: true,
    },
    requiredField: {
      default: null,
    },
    requiredFieldState: {
      default: null,
    },
  },
};
</script>

<style lang="scss">
@import "../assets/scss/ws-state-select.scss";
</style>