<script>
import PlainLabel from "~/components/atoms/label/PlainLabel";
import TextInput from "~/components/atoms/input/TextInput";
import PlainList from "~/components/atoms/list/PlainList";

export default {
  components: {PlainList, TextInput, PlainLabel},
  props: {
    id: {type: String, default: ""},
    value: {type: String, default: ""},
    label: {type: String, default: ""},
    format: {type: [String, Array], default: ""},
    size: {type: String, default: "md"},
    placeholder: {type: String, default: ""},
    is_disabled: {default: false},
    is_submitted: {type: Boolean, default: false},
    is_error: {type: Boolean, default: false},
    error_message: {type: Array, default: []},
    max_length: {type: Number, default: 524288},
    additional_class_group: {type: String, default: ""},
    additional_class_input: {type: String, default: ""},
    additional_class_label: {type: String, default: ""}
  },
  computed: {
    local_value: {
      get: function () {
        return this.value
      },
      set: function (value) {
        this.$emit('input', value)
      }
    }
  },
  methods: {
    submitToParent() {
      this.$emit("submit")
    }
  }
}
</script>
<template>
  <div :class="'form-group ' + additional_class_group">
    <plain-label :value="label" :is_bold="true" :additional_class="additional_class_label"/>
    <text-input :id="id" :is_error="is_error" :max_length="max_length" :placeholder="placeholder" :format="format"
                :additional_class="additional_class_input" :value="value" @submit="submitToParent" v-model="local_value"
                :is_submitted="is_submitted"/>
    <small class="text-danger" v-if="is_submitted && is_error">
      <plain-list v-for="(error, index) in error_message" v-if="!error.state" :key="index" additional_class="ml-3 my-1">
        {{ error.message }}
      </plain-list>
    </small>
  </div>
</template>
