<template>
  <label
    class="base-radio-group"
    :class="{ disabled: disabled, 'toggle-small': size == 'small' }"
  >
    <input
      type="radio"
      class="base-radio"
      :id="id"
      :disabled="disabled"
      :value="value"
      :name="name"
      :checked="modelValue == value"
      v-model="dataRadio"
      @change="selectRadio"
    />
    <span
      class="label checkbox"
      :style="{
        background: disabled && modelValue == value ? '#6F7C89' : '',
      }"
      ><base-icon
        :iconName="
          modelValue == value
            ? iconCheck
            : iconUncheck
        "
        class="iconToggle"
        :width="size == 'small' ? '20' : '24'"
        :height="size == 'small' ? '20' : '24'"
        :color="
          modelValue == value && disabled
            ? '#6F7C89'
            : modelValue == value && !disabled
            ? '#0FA85E'
            : '#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;
      },
    },
    modelValue: {
      type: [Number, String, Boolean, Array, Object],
    },
    iconCheck: {
      type: [String],
      default: "radio_button_checked"
    },
    iconUncheck: {
      type: [String],
      default: "radio_button_unchecked"
    }
  },
  data() {
    return {
      dataRadio: null
    }
  },
  methods: {
    // update parent modelValue based on setted radio value
    selectRadio() {
      this.$emit("update:modelValue", this.dataRadio);
    },
  },
};
</script>

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

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

  .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-radio {
    display: none;
  }

  .base-radio {
    &:disabled + .label {
      pointer-events: none;
      border-radius: 50%;
    }

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

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

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