<script>
// utils
import { random, isNull } from '#utils'
/**
 * BaseInput component
 */
export default {
  name: 'BaseInput',
  props: {
    /**
     * label
     */
    label: {
      type: String,
      default: ''
    },
    /**
     * labelClass
     */
    labelClass: {
      type: String,
      default: ''
    },
    /**
     * name
     */
    name: {
      type: String,
      default: ''
    },
    /**
     * type
     */
    type: {
      type: String,
      default: 'text'
    },
    /**
     * variant
     */
    variant: {
      type: String,
      default: ''
    },
    /**
     * fluid: define is width: 100%
     */
    fluid: {
      type: Boolean,
      default: false
    },
    /**
     * required
     */
    required: {
      type: Boolean,
      default: false
    },
    /**
     * placeholder
     */
    placeholder: {
      type: String,
      default: ''
    },
    /**
     * state
     */
    state: {
      type: Boolean,
      default: true
    },
    /**
     * inputClass
     */
    inputClass: {
      type: String,
      default: ''
    },
    /**
     * inputRef
     */
    inputRef: {
      type: String,
      default: function () {
        return `input_${random.alphaNumeric(10)}` // Random string of length: 10
      }
    },
    /**
     * validatedStatus
     */
    validatedStatus: {
      type: Boolean,
      default: null
    },
    /**
     * description
     */
    description: {
      type: String,
      default: ''
    },
    /**
     * descriptionClass
     */
    descriptionClass: {
      type: String,
      default: ''
    },
    /**
     * error
     */
    error: {
      type: String,
      default: ''
    },
    /**
     * errorClass
     */
    errorClass: {
      type: String,
      default: ''
    }
  },
  computed: {
    /**
     * vModel (to use v-model directive)
     * See -> https://vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model
     */
    vModel: {
      get () {
        return this.value
      },
      set (val) {
        // Emit input event for top level (v-model)
        this.$emit('input', val)
        // Emit 'changed' custom event
        this.$emit('changed', val)
      }
    },
    /**
     * showValidatedIndicator
     */
    showValidatedIndicator: function () {
      return !isNull(this.validatedStatus)
    }
  }
}
</script>

<style lang="scss">
  ._input-container {
    overflow: auto;

    ._input-label {
      @apply mb-2;
    }

    ._input {
      @apply relative;
    }

    ._input-description {
      @apply text-sm text-gray-400;
      @apply mb-2;
    }

    ._input-error {
      @apply text-sm @dark:text-@dark-error;
      @apply mb-2;
    }
  }
</style>
