<template>
  <ElSelect
    v-model="selected"
    :no-match-text="noMatchText"
    :placeholder="placeholder"
    class="tf-select-text wt-select-text"
    filterable
    @change="$emit('change', $event)"
    @input="$emit('input', $event)"
    @blur="$emit('blur')"
    @focus="$emit('focus')"
  >
    <ElOptionGroup
      :label="title"
    >
      <ElOption
        v-for="option in options"
        :key="option[optionValue]"
        :value="option[optionValue]"
        :label="option[optionText]"
      />
    </ElOptionGroup>
  </ElSelect>
</template>

<script>
/**
 * TfSelectText popover compononent
 *
 * @vuedoc
 * @exports TfPopover/TfSelectText
 * @category Components
 */

  export default {
    name: 'TfSelectText',
    props: {
      noMatchText: {
        type: String,
        default: 'Option not found',
      },
      options: {
        type: Array,
        required: true,
        default: () => [],
      },
      optionText: {
        type: String,
        default: 'name',
      },
      optionValue: {
        type: String,
        default: 'id',
      },
      placeholder: {
        type: String,
        default: 'n/a',
      },
      title: {
        type: String,
        required: true,
        default: 'Select option',
      },
      value: {
        type: [Number, String],
        default: null,
      },
    },

    data: () => ({
      selected: null,
    }),

    created() {
      this.selected = this.value;
    },
  };
</script>

<style lang="scss" scoped>
  @import 'src/assets/styles/variables';

  .el-select {
    width: 100%;

    ::v-deep.el-input {
      &__inner {
        border-color: transparent;

        &,
        &::placeholder {
          /* stylelint-disable-next-line declaration-no-important */
          color: $tf-dark-blue !important;
        }
      }

      &__suffix {
        display: none;
      }
    }

    &:hover {
      ::v-deep.el-input:not(.is-focus) {
        .el-input__inner {
          border-color: $tf-light-gray;
        }
      }
    }
  }

  .el-select-group .el-select-dropdown__item {
    padding-left: 10px;
  }

  ::v-deep .el-select-group__title {
    padding-left: 10px;
    font: {
      size: 14px;
      weight: 700;
    }
    color: $tf-dark-blue;
    border-bottom: 1px solid $tf-extra-light-gray-1;
  }
</style>
