<template>
  <label
    class="form-switch"
    :style="{
      borderColor:
        modelValue && !disabled
          ? '#0FA85E'
          : modelValue && disabled
          ? '#B7E5CE'
          : '',
    }"
    :class="{ disabled: disabled }"
  >
    <input
      type="checkbox"
      :id="id"
      :disabled="disabled"
      :value="value"
      :name="name"
      v-model="choice_button_value"
    />
    <span class="slider round"></span>
  </label>
</template>

<script>
export default {
  props: {
    value: [Number, String, Boolean, Array, Object],
    id: {
      default: "",
      type: String,
    },
    name: {
      default: "",
      type: String,
    },
    disabled: {
      default: false,
      type: Boolean,
    },
    modelValue: {
      type: [Number, String, Boolean, Array, Object],
    },
  },
  computed: {
    // return value of run function based on checked condtion
    choice_button_value: {
      get: function () {
        return this.value;
      },
      set: function (value) {
        // Communicate the change to parent component so that selectedValue can be updated
        this.$emit("update:modelValue", value);
        this.$emit("onChange", value)
      },
    },
  },
};
</script>

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

.form-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
  border: 2px solid #a9b0b8;
  border-radius: 24px;
  transition: all 0.3s;
  input {
    opacity: 0;
    width: 0;
    height: 0;
    &:checked + .slider {
      background-color: $success-2;
    }
    &:focus + .slider {
      box-shadow: 0 0 1px #2196f3;
    }
    &:checked + .slider:before {
      -webkit-transform: translateX(18px);
      -ms-transform: translateX(18px);
      transform: translateX(18px);
      background-color: $success-4;
    }
  }
}

.form-switch:hover {
  border-color: $neutral-5;
  .slider:before {
    background-color: $neutral-5;
  }
  input:checked + .slider:before {
    background-color: $success-5;
  }
  input:checked + .slider {
    background-color: $success-3;
  }
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: $neutral-1;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 4px;
  background-color: $neutral-3;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

/* Rounded sliders */
.slider.round {
  border-radius: 24px;
}

.slider.round:before {
  border-radius: 50%;
}

.disabled {
  border-color: $neutral-2;
  .slider:before {
    background-color: $neutral-2;
  }
  input:checked + .slider:before {
    background-color: $success-2;
  }
  input:checked + .slider {
    background-color: $success-1;
  }
  &:hover {
    border-color: $neutral-2;
    .slider:before {
      background-color: $neutral-2;
    }
    input:checked + .slider {
      background: $success-1;
    }
    input:checked + .slider:before {
      background: $success-2;
    }
  }
}
</style>
