<template>
  <input
    type="checkbox"
    :disabled="disabled"
    :name="name"
    v-model="inputValue"
  />
  <div class="switch-wrapper" :class="{ isOn: modelValue, disabled }"></div>
</template>

<script lang="ts" setup>
import { computed } from 'vue';

const props = withDefaults(
  defineProps<{
    disabled?: boolean;
    name: string;
    modelValue: boolean;
  }>(),
  {
    disabled: false,
    modelValue: false,
  },
);

const $emits = defineEmits<{
  (e: 'update:modelValue', value: any): void;
}>();

const inputValue = computed({
  get() {
    return props.modelValue;
  },
  set(val: any) {
    $emits('update:modelValue', val);
  },
});
</script>

<style lang="scss" scoped>
input {
  display: none;
}
.switch-wrapper {
  --switch-background-color: var(--bms-grey-25);
  --switch-color: var(--bms-grey-100);
  --switch-transform: none;

  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 0.25em;
  background-color: var(--switch-background-color);
  width: 2em;
  height: 1em;
  border-radius: var(--bms-border-radius-xlarge);
  position: relative;
  transition: 0.2s;
  flex-shrink: 0;

  &::before {
    content: '';
    transition: 0.5s;
    transform: var(--switch-transform);
    width: 0.5em;
    height: 0.5em;
    background-color: var(--switch-color);
    display: block;
    border-radius: var(--bms-border-radius);
  }
  &.isOn {
    --switch-transform: translateX(1em);
    --switch-background-color: var(--bms-main-100);
    --switch-color: var(--bms-white);
  }
  &.disabled {
    --switch-background-color: var(--bms-grey-25);
    --switch-color: var(--bms-grey-50);
  }
}
</style>
