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

export default {
  components: {PlainList, SelectInput, PlainLabel},
  props: {
    label: {default: ""},
    value: {default: {}},
    options: {type: Array},
    placeholder: {default: ""},
    is_disabled: {default: false},
    search_by: {default: "text"},
    is_searchable: {default: false},
    is_submitted: {default: false},
    is_error: {default: false},
    error_message: {type: Array, default: []},
    additional_class_group: {default: ""},
    additional_class_input: {default: ""},
    additional_class_label: {default: ""}
  },
  data: () => ({
    class_wrapper: "",
  }),
  mounted() {
    this.generateInputClass()
  },
  computed: {
    local_value: {
      get: function () {
        return this.value
      },
      set: function (value) {
        this.$emit('input', value)
      }
    },
  },
  watch: {
    is_submitted: function () {
      this.generateInputClass()
    },

    is_error: function () {
      this.generateInputClass()
    },

    local_value: function (data) {
      this.$emit("input", data)
    }
  },

  methods: {
    submitToParent() {
      this.$emit("submit")
    },

    generateInputClass() {
      if (this.is_error && this.is_submitted) {
        this.class_wrapper = `form-group invalid ${this.additional_class_group}`
      } else {
        this.class_wrapper = `form-group ${this.additional_class_group}`
      }
    },
  }
}
</script>
<template>
  <div :class="class_wrapper">
    <plain-label :value="label" :is_bold="true" :additional_class="additional_class_label"/>
    <select-input :options="options" v-model="local_value" :placeholder="placeholder" :search_by="search_by" :is_searchable="is_searchable" :is_disabled="is_disabled" />
    <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>
<style>
.invalid .multiselect__tags {
  border-color: var(--danger) !important;
}

.invalid .multiselect__select::before {
  border-color: !important;
  color: white !important;
  border-color: var(--danger) transparent transparent
}
</style>