<template>
  <div>
    <label
      v-for="(item, index) in list" :key="index"
      class="base-checkbox-group"
      :class="{ disabled: disabled || item.disabled, 'toggle-small': size == 'small' }"
      :id="`id-${setId(item[value])}`"
    >
      <input
        type="checkbox"
        class="base-checkbox"
        :id="`checkbox${id}`"
        :disabled="disabled || item.disabled"
        :value="item[value]"
        :name="name"
        v-model="dataValue[index]"
        @change="handleSetValue"
        @click="$emit('click', item)"
      />
      <span
        class="label checkbox"
        :class="{ 'bg-active': (disabled || item.disabled) && modelValue.indexOf(item[value]) != -1 }"
      >
        <base-icon
          :iconName="
            modelValue.indexOf(item[value]) != -1
              ? iconToggle
              : 'check_box_outline_blank'
          "
          class="iconToggle"
          :width="size == 'small' ? '20' : '24'"
          :height="size == 'small' ? '20' : '24'"
          :color="
            modelValue.indexOf(item[value]) != -1 && (disabled || item.disabled)
              ? '#D4D7DB'
              : modelValue.indexOf(item[value]) != -1 && !disabled
              ? '#0FA85E'
              : '#D4D7DB'
          "
        />
      </span>
      <div v-if="withLabelBox" class="label-box" :class="item[value]">
        {{ item[withLabelBox] }}
      </div>
      <div :id="`text-${setId(item[value])}`">{{ item[labelText] }}</div>
    </label>
  </div>
</template>

<script>
import BaseIcon from "@/components/Base/BaseIcon";

export default {
  components: {
    BaseIcon,
  },
  name: "base-input-choice",
  props: {
    value: [Number, String, Boolean, Array, Object],
    id: {
      default: "",
      type: String,
    },
    name: {
      default: "",
      type: String,
      required: true,
    },
    labelText: {
      default: "",
      type: String,
    },
    disabled: {
      default: false,
      type: Boolean,
    },
    size: {
      type: String,
      validator: function (value) {
        return ["small"].indexOf(value) !== -1;
      },
    },
    iconToggle: {
      type: [String],
      default: "check_box",
    },
    modelValue: {
      type: [Number, String, Boolean, Array, Object],
    },
    list: {
      type: [Array],
      required: true,
    },
    withLabelBox: {
      type: [String],
      default: "",
    }
  },
  data() {
    return {
      dataValue: [],
    };
  },
  watch: {
    modelValue: {
      deep: true,
      handler: function() {
        this.loadDataValue();
      }
    },
  },
  mounted() {
    this.loadDataValue();
  },
  methods: {
    handleSetValue() {
      let checkboxes = document.getElementsByName(this.name);
      let selected = [];
      for (let i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].checked) {
          selected.push(checkboxes[i].value);
        }
      }
      this.$emit("update:modelValue", selected);
    },
    loadDataValue() {
      this.dataValue = [];
      this.list.forEach((element) => {
        let checkIndex = this.modelValue.indexOf(element.value);
        if (checkIndex != -1) {
          this.dataValue.push([element.value]);
        } else {
          this.dataValue.push([]);
        }
      });
    },
    setId(value) {
      return String(value).replace(/ /g, "-").replaceAll(/\./g, "-")
    }
  },
};
</script>

<style lang="scss">
@use "@/assets/style/_color.scss" as *;

.base-checkbox-group,
.base-radio-group {
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 14px;

  .label-box {
    width: 18px;
    height: 18px;
    font-size: 12px;
    border: 2px solid;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    font-weight: 800;
  }

  .bg-active {
    background: #6f7c89;
  }

  .iconToggle {
    g {
      transition: all 0.3s;
    }
  }

  svg {
    position: absolute;
    left: -4px;
    top: -4px;
  }

  .label {
    align-self: center;
    margin-right: 10px;
    width: 14px;
    height: 14px;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.3s;

    &.checkbox {
      position: relative;
    }

    &:after {
      content: "";
      position: absolute;
      margin: 1px;
      width: 14px;
      height: 14px;
      background: #43a047;
      transform: scale(0);
      transition: all 0.2s ease;
      opacity: 0.08;
      pointer-events: none;
    }
  }

  &:hover .label:after {
    transform: scale(2.5);
    border-radius: 50%;
  }

  &:hover g {
    fill: $success-3;
  }

  .base-checkbox,
  .base-radio {
    display: none;
  }

  .base-checkbox {
    &:disabled + .label {
      pointer-events: none;
    }

    &:disabled + .label:after {
      background: $neutral-5;
      transform: scale(1.2);
    }
  }
}

.disabled {
  &:hover g {
    fill: #d4d7db;
  }
}

.toggle-small {
  font-size: 12px;
  .label:after {
    width: 10px;
    height: 10px;
    top: 1px;
  }
  .label {
    margin-right: 7px;
  }
  svg {
    left: -3.5px;
    top: -3px;
  }
}
</style>
