<template>
  <div class="toggle-wrapper">
    <input
      :id="inputId"
      type="checkbox"
      class="toggle-input"
      :checked="modelValue"
      @change="handleChange"
      :disabled="disabled"
    />
    <label
      :for="inputId"
      class="toggle-label"
      :class="[
        modelValue
          ? classColor?.on || 'bg-chill-green'
          : classColor?.off || 'bg-danger',
      ]"
      :style="{
        backgroundColor: classColor ? '' : !modelValue ? colorOff : colorOn,
        height: '28px',
        width: toggleWidth + 'px',
      }"
    >
      <span
        class="toggle-slider"
        :style="{
          transform: modelValue ? `translateX(${toggleWidth - 26}px)` : 'none',
          width: '24px',
          height: '24px',
        }"
      >
      </span>
      <span
        class="toggle-text"
        :style="{
          color: 'white',
          marginLeft: !modelValue ? '28px' : '0',
          paddingLeft: modelValue ? '6px' : '0',
        }"
      >
        {{ modelValue ? onLabel : offLabel }}
      </span>
    </label>
  </div>
</template>

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

interface Props {
  modelValue: boolean;
  onLabel?: string;
  offLabel?: string;
  disabled?: boolean;
  id?: string;
  colorOn?: string;
  colorOff?: string;
  classColor?: {
    on: string;
    off: string;
  };
}

type Emits = (e: "update:modelValue", value: boolean) => void;

const props = withDefaults(defineProps<Props>(), {
  onLabel: "ON",
  offLabel: "OFF",
  disabled: false,
  id: "",
  colorOn: "#4caf50",
  colorOff: "#ccc",
  classColor: () => ({
    on: "bg-chill-green",
    off: "bg-chill-red",
  }),
});

const emit = defineEmits<Emits>();

const inputId = computed(
  () => props.id || `toggle-${Math.random().toString(36).substr(2, 9)}`,
);

// Calcule la largeur du toggle basée sur le label le plus long
const toggleWidth = computed(() => {
  const onLength = props.onLabel.length;
  const offLength = props.offLabel.length;
  const maxLength = Math.max(onLength, offLength);

  // Largeur minimale: 56px, puis 7px par caractère supplémentaire au-delà de 3 caractères
  const baseWidth = 56;
  const extraWidth = Math.max(0, maxLength - 3) * 7;

  return baseWidth + extraWidth;
});

const handleChange = (event: Event) => {
  const target = event.target as HTMLInputElement;
  emit("update:modelValue", target.checked);
};
</script>

<style scoped>
.toggle-wrapper {
  display: inline-block;
  position: relative;
}

.toggle-input {
  display: none;
}

.toggle-label {
  display: block;
  border-radius: 14px;
  position: relative;
  cursor: pointer;
  transition: background-color 0.3s ease;
  user-select: none;
}

.toggle-label:hover {
  filter: brightness(0.95);
}

.toggle-input:disabled + .toggle-label {
  opacity: 0.6;
  cursor: not-allowed;
}

.toggle-slider {
  position: absolute;
  top: 2px;
  left: 2px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-text {
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 0.5px;
  transition: opacity 0.3s ease;
}
</style>
