<template>
  <DropdownWrapper
    ref="dropdown" 
    :disabled="disabled"
    fit-width
    hide-on-scroll
    top-offset="-14"
    class="select-dropdown">
    <template #trigger>
      <div
        class="pui-select has-action"
        :class="[
          size,
          state,
          {
            'has-icon': icon,
            'has-hint': hint,
            'has-label': label,
            'filled': computedValue,
            'is-required': required
          }
        ]"
        :disabled="disabled"
      >
        <p-icon v-if="icon" :size="size" :icon="icon" />
        <span class="label" v-if="label">{{ label }}</span>
        <input
          disabled
          ref="input"
          type="text"
          :value="selectedOption"
          v-bind="$attrs"
        />
        <p-tooltip 
          class="hint" 
          v-if="hint"
          :label="hint"
          position="is-top"
          :width="tooltipWidth"
          :is-multiline="hint.length > 80"
          trigger="hover"
        >
          <i class="mdi mdi-information-outline"></i>
        </p-tooltip>
        <div class="chevron"><i class="mdi mdi-chevron-down"></i></div>
        <div class="action-trigger" v-if="clearable && computedValue && !disabled" @click="clear">
          <i class="mdi mdi-close"></i>
        </div>
      </div>
    </template>
    <div class="pui-dropdown">
      <ul>
        <li 
          v-for="option in options" 
          :key="option.value"
          :disabled="option.disabled"
          :class="{'is-active': option.value === value}"
          @click="onSelect(option)"
        >
          <a><span>{{ option.key }}</span></a>
        </li>
      </ul>
    </div>
  </DropdownWrapper>
</template>

<script>
import DropdownWrapper from '../dropdown/DropdownWrapper.vue'

export default {
  name: "PSelect",
  components: { DropdownWrapper },
  props: {
    value: [Number, String],
    required: Boolean,
    disabled: Boolean,
    size: String,
    state: String,
    icon: String,
    label: String,
    clearable: Boolean,
    options: Array,
    hint: String
  },
  data() {
    return {
      newValue: this.value,
      newType: this.type,
    };
  },
  methods: {
    onSelect(option) {
      if (!option.disabled) {
        const value = option.value;
        this.updateValue(value);
        this.$refs.dropdown.away();
      }
    },
    clear() {
        this.updateValue(null)
        
        this.$nextTick(() => {
            this.$refs.input.focus()
        })
    },
    updateValue(value) {
      this.computedValue = value;
    },
  },
  computed: {
    computedValue: {
      get() {
        return this.newValue;
      },
      set(value) {
        this.newValue = value;
        this.$emit("input", value);
      },
    },
    selectedOption() {
      if (this.computedValue) {
        const selectedOption = this.options.find(option => option.value === this.computedValue);
        return selectedOption ? selectedOption.key : this.computedValue;
      }
      return null
    },
    tooltipWidth() {
      return (typeof this.hint === 'string' && this.hint.length > 80) ? 200 : 'auto'
    }
  },
  watch: {
    value(value) {
      this.newValue = value;
    },
  },
};
</script>