export default {
  emits: ["change"],
  model: {
    prop: "modelValue",
    event: "change",
  },
  props: {
    value: {
      type: [String, Number],
      required: true,
    },
    modelValue: {
      type: [Array, String, Number],
      required: true,
    },
    isMultiSelect: Boolean,
    isWide: Boolean,
    buttonImage: String,
    buttonImageId: String,
    buttonLabel: {
      type: String,
      required: true,
    },
    isRequired: {
      type: Boolean,
      required: true,
    },
    buttonLabelSubCopy: {
      type: String,
      required: true,
    },
    groupName: {
      type: String,
      required: true,
    },
    validationRules: {
      type: String,
      required: true,
    },
    classes: [String, Array, Object],
  },
  methods: {
    handleSelectionChange(event) {
      console.log(event);
      console.log(this.value);
      console.log(this.modelValue);
      let isChecked = event.target.checked;
      console.log("BM value: ", this.value);
      let valueToEmit;
      if (this.isMultiSelect && this.modelValue instanceof Array) {
        let newValue = [...this.modelValue];
        if (isChecked && !this.modelValue.includes(this.value)) {
          newValue.push(this.value);
        } else {
          newValue.splice(newValue.indexOf(this.value), 1);
        }

        valueToEmit = newValue;
      } else {
        valueToEmit = this.value;
      }

      console.log("ButtonWrapper is emitting: ", valueToEmit);
      this.$emit("change", valueToEmit);
    },
  },
  computed: {
    isChecked() {
      if (this.isMultiSelect && this.modelValue instanceof Array) {
        this.modelValue.includes(this.value);
      }
      return this.modelValue === this.value;
    },
    inputType() {
      return this.isMultiSelect ? "checkbox" : "radio";
    },
    buttonId() {
      return `${this.groupName} ${JSON.stringify(this.value)}`;
    },
  },
};