<template>
  <n-input
    :rules="rules"
    :value="value"
    :label="label"
    :filled="filled"
    :disabled="disabled"
    :required="required"
    :helper-text="helperText"
  >
    <template #default="{ hasError }">
      <div class="pkg-n-base-select n-input-slot n-radius-md n-py-3 n-px-4">
        <slot name="prepend-icon">
          <div
            v-if="prependIcon"
            :class="[
              prependIcon,
              'n-icon n-input-icon-wrapper',
              { 'n-color-danger': hasError },
            ]"
          />
        </slot>

        <v-select
          v-bind="$attrs"
          :items="items"
          :item-text="itemText"
          :disabled="disabled"
          :item-value="itemValue"
          :return-object="returnObject"
          :placeholder="placeholder"
          hide-details
          :value="value"
          :menu-props="{
            bottom: true,
            offsetY: true,
            contentClass: 'pkg-base-select',
          }"
          v-on="{
            ...$listeners,
            change: updateParent,
            input: updateParent,
          }"
        >
          <template #append>
            <n-icon name="n-icon-arrow-down-1" />
          </template>
        </v-select>

        <slot name="append-icon">
          <div
            v-if="appendIcon"
            :class="[
              appendIcon,
              'n-icon n-input-icon-wrapper',
              { 'n-color-danger': hasError },
            ]"
          />
        </slot>
      </div>
    </template>
  </n-input>
</template>

<script>
import NInput from "../NInput/n-input.vue";
import NIcon from "../../NIcon/n-icon.vue";

export default {
  name: "NSelect",
  components: {
    NInput,
    NIcon,
  },
  props: {
    rules: {
      type: Array,
      default: () => [],
    },
    value: {
      type: [String, Number],
      default: "",
    },
    label: {
      type: String,
      default: "",
    },
    itemValue: {
      type: String,
      default: "value",
    },
    itemText: {
      type: String,
      default: "label",
    },
    items: {
      type: Array,
      default: () => [],
    },
    prependIcon: {
      type: String,
      default: "",
    },
    appendIcon: {
      type: String,
      default: "",
    },
    placeholder: {
      type: String,
      default: "",
    },
    helperText: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    filled: {
      type: Boolean,
      default: false,
    },
    returnObject: {
      type: Boolean,
      default: false,
    },
    required: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    updateParent(value) {
      this.$emit("change", value);
      this.$emit("input", value);
    },
  },
};
</script>

<style scoped>
@import url("./n-select.css");
</style>
