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

export default {
  components: {CheckboxInput, PlainList, PlainLabel},
  props: {
    label: {default: ""},
    value: {default: ""},
    size: {default: "md"},
    options : {default : []},
    is_submitted: {type: Boolean, default: false},
    is_error: {type: Boolean, default: false},
    is_disabled: {type: Boolean, default: false},
    error_message: {type: Array, default: []},
    max_length: {type: Number, default: 524288},
    additional_class_group: {default: ""},
    additional_class_input: {default: ""},
    additional_class_label: {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"/>
    <checkbox-input :options="options" v-model="local_value" :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>
