<template>
  <div v-if="item" class="input-field" :class="item.classes">
    <label v-if="item.label" :for="item.id">
      {{ item.label }}
      <template v-if="item.required">*</template>
      <button
        v-if="item.help"
        class="reset helper"
        @mouseover="showHelpPopover = true"
        @mouseleave="showHelpPopover = false"
      >
<!--        <svg-inline path="help.svg" />-->
      </button>

      <!--      <PopoverHelp-->
      <!--          v-if="showHelpPopover"-->
      <!--          :title="item.help.title"-->
      <!--          :description="item.help.description"/>-->
    </label>

    <div class="input-container" :class="{ 'has-icon': item.icon }">
<!--      <SvgInline v-if="item.icon" :path="item.icon" />-->

      <input-text
        v-if="['text', 'email'].includes(item.type)"
        :type="item.type"
        :required="item.required"
        :disabled="item.disabled"
        :id="item.id"
        :error="error"
        :placeholder="item.placeholder"
        :value="item.value"
        @setter="(val) => $emit('setter', val)"
        @remove-error="(val) => $emit('remove-error', val)"
      />

      <input-text-area
        v-if="item.type === 'textarea'"
        :required="item.required"
        :disabled="item.disabled"
        :id="item.id"
        :error="error"
        :placeholder="item.placeholder"
        :value="item.value"
        :height="item.height"
        @setter="(val) => $emit('setter', val)"
        @remove-error="(val) => $emit('remove-error', val)"
      />

<!--      <input-money-->
<!--        v-if="item.type === 'money'"-->
<!--        type="number"-->
<!--        :required="item.required"-->
<!--        :disabled="item.disabled"-->
<!--        :id="item.id"-->
<!--        :error="error"-->
<!--        :placeholder="item.placeholder"-->
<!--        :value="item.value"-->
<!--        @setter="(val) => $emit('setter', val)"-->
<!--        @remove-error="(val) => $emit('remove-error', val)"-->
<!--        @out="(val) => $emit('out', val)"-->
<!--      />-->

<!--      <input-select-->
<!--        v-if="item.type === 'select'"-->
<!--        :placeholder="item.placeholder"-->
<!--        :options="item.options"-->
<!--        :error="error"-->
<!--        :selected="item.value"-->
<!--        @setter="(val) => $emit('setter', val)"-->
<!--        @remove-error="$emit('remove-error')"-->
<!--      />-->

<!--      <input-rich-text-->
<!--        v-if="item.type === 'rich'"-->
<!--        v-model="item.value"-->
<!--        :options="['bold', 'italic', 'underline', 'link', 'list']"-->
<!--      />-->

<!--      <input-date-picker-->
<!--        v-if="item.type === 'date'"-->
<!--        :type="item.type"-->
<!--        v-model="item.value"-->
<!--        :error="error"-->
<!--        :configuration="item.configuration"-->
<!--        @setter="(val) => $emit('setter', val)"-->
<!--        @remove-error="$emit('remove-error')"-->
<!--      />-->

<!--      <input-time-picker-->
<!--        v-if="item.type === 'time'"-->
<!--        :type="item.type"-->
<!--        v-model="item.value"-->
<!--        :error="error"-->
<!--        :configuration="item.configuration"-->
<!--        @setter="(val) => $emit('setter', val)"-->
<!--        @remove-error="$emit('remove-error')"-->
<!--      />-->

      <span class="error" v-if="errorMessage">{{ errorMessage }}</span>
    </div>
  </div>
</template>

<script>
// import SvgInline from "../../helpers/SvgInline";
// import InputTimePicker from "@/stories/input/types/InputTimePicker";
// import InputDatePicker from "@/stories/input/types/InputDatePicker";
// import InputSelect from "@/stories/input/types/InputSelect";
// import InputMoney from "@/stories/input/types/InputMoney";
import InputText from "@/stories/input/types/InputText.vue";

import "./styles/index.scss";
//import InputRichText from "@/stories/input/types/InputRichText.vue";
import InputTextArea from "@/stories/input/types/InputTextArea.vue";

export default {
  name: "Input",
  components: {
    InputTextArea,
    // InputRichText,
    InputText,
    // InputMoney,
    // InputSelect,
    // InputDatePicker,
    // InputTimePicker,
    // SvgInline,
  },
  emits: ["setter"],
  props: {
    item: { type: Object, required: true },
  },
  computed: {
    error() {
      if (this.item.errors) {
        const error = Object.values(this.item.errors).find(
          (err) => err.validated === false
        );
        if (error) {
          return true;
        }
      }

      return this.item.error;
    },

    errorMessage() {
      if (this.item.hideError) {
        return null;
      }

      if (this.item.errors) {
        const error = Object.values(this.item.errors).find(
          (err) => err.validated === false
        );

        if (error) {
          return error.message;
        }
      }

      return this.item.errorMessage;
    },
  },
};
</script>
