<template>
  <label
    class="base-checkbox-group"
    :class="{ disabled: disabled, 'toggle-small': size == 'small' }"
  >
    <input
      type="checkbox"
      class="base-checkbox"
      :id="id"
      :disabled="disabled"
      :value="value"
      :name="name"
      v-model="choice_button_value"
    />
    <span
      class="label checkbox"
      :class="{ 'bg-active': disabled && modelValue }"
    >
      <base-icon
        :iconName="modelValue ? iconToggle : 'check_box_outline_blank'"
        class="iconToggle"
        :width="size == 'small' ? '20' : '24'"
        :height="size == 'small' ? '20' : '24'"
        :color="
          modelValue && disabled
            ? '#D4D7DB'
            : modelValue && !disabled
            ? color
            : '#D4D7DB'
        "
      />
    </span>
    {{ labelText }}
  </label>
</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,
    },
    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],
    },
    color: {
      default: "#0FA85E",
      type: String,
    },
  },
  computed: {
    // return value of run function based on checked condtion
    choice_button_value: {
      get: function () {
        return typeof this.value == "boolean" ? this.modelValue : this.value;
      },
      set: function (value) {
        // Communicate the change to parent component so that selectedValue can be updated
        this.$emit("update:modelValue", !this.modelValue ? this.value : null);
      },
    },
  },
};
</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;

  .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>
