<script setup lang="ts">
import { color } from "~/composables/colors.ts";

const { big } = defineProps<{
  big?: boolean
  title?: string
}>()

const isOn = defineModel<boolean>()
const diameter = big? '28px' : '20px'
</script>

<template>
  <label
    :class="[$style.toggle, 'funkwhale']"
    v-bind="color({}, ['interactive', 'raised'])"
    :checked = "isOn || undefined"
  >
    <input type="checkbox" v-model="isOn"
      style="visibility: hidden; /* Hide even before stylesheet is loaded */"
    />
    <span v-if="title">{{ title }}</span>
</label>
</template>

<style module lang="scss">
.toggle {
  font-size: 14px;
  line-height: 1em;
  position: relative;
  padding: calc(var(--padding) - 1px) 0 calc(var(--padding) + 1px) 0;
  min-width: calc(var(--diameter) * 2);
  height: min-content;

  --diameter: v-bind(diameter);
  --lineWidth: 2px;
  --padding: 10px;

  --void-color: var(--void-off-background-color);
  --pin-color: var(--void-off-pin-color);

  &[checked] {
    --void-color: var(--void-on-background-color);
    --pin-color: var(--void-on-pin-color);
    &::after{
      transform:translateX(var(--diameter));
    }
  }

  &:hover {
    --void-color: var(--void-off-hover-background-color);
    --pin-color: var(--void-off-hover-pin-color);
    &[checked] {
      --void-color: var(--void-on-hover-background-color);
      --pin-color: var(--void-on-hover-pin-color);
    }
  }
  &::before, &::after {
    content: '';
    position: absolute;
    border-radius: var(--diameter);
  }
  &::before {
    height: var(--diameter);
    aspect-ratio: 2;
    background-color: var(--void-color);
    left: 0;
    top: var(--padding);
  }
  &::after {
    height: calc(var(--diameter) - var(--lineWidth) * 2);
    aspect-ratio: 1;
    background-color: var(--pin-color);
    left: var(--lineWidth);
    top: calc(var(--padding) + var(--lineWidth));
    transition: all .2s;
  }

  > span {
    padding-left: calc(var(--diameter) + 8px);
  }

  > input {
    visibility: hidden;
  }
}
</style>
