<template>
  <div class="toggle-switch">
    <label class="toggle-switch__label">
      <span class="toggle-switch__text">{{ label }}</span>
      <button
        type="button"
        :disabled="disabled"
        class="toggle-switch__track"
        @click="!disabled && toggle()"
      >
        <span
          class="toggle-switch__thumb"
          :class="{
            'toggle-switch__thumb--on': modelValue,
            'toggle-switch__thumb--off': !modelValue,
          }"
        />
      </button>
    </label>
    <div v-if="error" class="toggle-switch__error dir-rtl" :class="{ 'animate-shake': vibration }">
      {{ error }}
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  modelValue: { type: Boolean, default: false },
  name: { type: String, default: '' },
  label: { type: String, default: '' },
  error: { type: String, default: '' },
  disabled: { type: Boolean, default: false },
  vibration: { type: Boolean, default: false },
})

const emit = defineEmits(['update:modelValue'])

const toggle = () => emit('update:modelValue', !props.modelValue)
</script>

<style lang="scss" scoped>
.toggle-switch {
  position: relative;

  &__label {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    cursor: pointer;
    user-select: none;
  }

  &__track {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 2rem;
    width: 3.75rem;
    border: none;
    border-radius: 9999px;
    background-color: rgba(104, 104, 104, 5%);
    transition: background-color 0.3s;
    cursor: pointer;
    padding: 0;

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }

  &__thumb {
    display: inline-block;
    height: 1.5rem;
    width: 1.5rem;
    border-radius: 9999px;
    transition: transform 0.3s;

    &--on {
      background-color: var(--color-primary);
      transform: translateX(-1.75rem);
    }

    &--off {
      background-color: #fff;
      transform: translateX(-0.5rem);
    }
  }

  &__text {
    font-family: var(--font-family-fa);
    font-weight: 400;
    font-size: 0.95rem;
    color: #374151;
  }

  &__error {
    margin-top: 0.625rem;
    padding: 0 0.5rem;
    text-align: right;
    font-family: var(--font-family-fa);
    font-size: 0.75rem;
    color: var(--color-error);
    transition: transform 0.075s;
  }
}
</style>
