<template>
  <n-input
    :rules="rules"
    :value="value"
    :label="label"
    :filled="filled"
    :disabled="disabled"
    :required="required"
    :helper-text="helperText"
  >
    <template #default="{ hasError }">
      <div class="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>

        <input
          type="text"
          v-bind="$attrs"
          :value="value"
          :disabled="disabled"
          class="pkg-n-text-field"
          :placeholder="placeholder"
          v-on="{
            ...$listeners,
            input: updateParent,
          }"
        />

        <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";

export default {
  name: "NTextField",
  components: {
    NInput,
  },
  props: {
    rules: {
      type: Array,
      default: () => [],
    },
    value: {
      type: String,
      default: "",
    },
    label: {
      type: String,
      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,
    },
    required: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    updateParent(e) {
      this.$emit("input", e.target.value);
    },
  },
};
</script>

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