<script lang="ts" setup>
const props = defineProps<{
  value?: boolean
}>()

const emit = defineEmits(['update:value', 'change'])

const handleChange = (event: Event) => {
  const _value = (event.target as HTMLInputElement).checked
  emit('update:value', _value)
  emit('change', _value)
}
</script>

<template>
  <label class="rocker-switch">
    <input :value="props.value" type="checkbox" :checked="props.value" @change="handleChange">
    <span class="switch-left">ON</span>
    <span class="switch-right">OFF</span>
  </label>
</template>

<style scoped lang="less">
.rocker-switch {
  display: flex;
  width: 72px;
  font-size: 14px;
  color: #fff;
  font-weight: 700;
  letter-spacing: 1px;
  border: 0.5em solid #eee;
  background-color: #999;
  user-select: none;

  input[type='checkbox'] {
    display: none;
  }

  input:checked + .switch-left + .switch-right {
    transform: rotate(-15deg) skew(-15deg) translate(-1px, -5px);
  }
  input:checked + .switch-left + .switch-right::before {
    background-color: #ccc;
    content: '';
    position: absolute;
    width: 3px;
    height: 30px;
    transform: skewY(75deg) skewX(4deg) rotate(5deg) translateX(1px);
    top: 1.5px;
    right: -1.5px;
  }

  input + .switch-left {
    transform: rotate(15deg) skew(17deg) translate(1px, -5px);
  }

  input:checked + .switch-left {
    background-color: #0084d0;
    transform: none;
  }

  input:not(:checked) + .switch-left  {
    background-color: #ccc;
  }

  input:not(:checked) + .switch-left + .switch-right {
    background-color: #bd5757;
    color: #fff;
  }

  input + .switch-left::before {
    background-color: #ccc;
    content: '';
    position: absolute;
    width: 3px;
    height: 30px;
    background-color: #ccc;
    transform: skewY(-75deg) skewX(-4deg) rotate(-5deg) translateX(-1.5px);
    top: -1.5px;
    left: -1.5px;
  }

  .switch-left {
    width: 36px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
  }

  .switch-right {
    color: #888;
    width: 36px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    background-color: #ddd;
    cursor: pointer;
  }
}
</style>