<script setup lang="ts">
import { CheckboxRoot, CheckboxIndicator } from "reka-ui";
import Label from "../ui/Label.vue";
import type { FieldDefinition } from "./types";

const props = defineProps<{
  field: FieldDefinition;
  modelValue?: unknown;
  error?: string;
}>();

const emit = defineEmits<{
  "update:modelValue": [value: boolean | string[]];
}>();

function toggleOption(value: string, checked: boolean) {
  const current = Array.isArray(props.modelValue)
    ? (props.modelValue as string[])
    : [];
  if (checked) {
    emit("update:modelValue", [...current, value]);
  } else {
    emit(
      "update:modelValue",
      current.filter((v) => v !== value),
    );
  }
}

function isChecked(value: string): boolean {
  return (
    Array.isArray(props.modelValue) &&
    (props.modelValue as string[]).includes(value)
  );
}
</script>

<template>
  <!-- Multi-checkbox when options are defined -->
  <div v-if="field.options" class="flex flex-col gap-2">
    <div
      v-for="(label, value) in field.options"
      :key="value"
      class="flex items-center gap-2"
    >
      <CheckboxRoot
        :id="`${field.name}_${value}`"
        :checked="isChecked(String(value))"
        :disabled="field.readonly"
        class="border-input ring-offset-background focus-visible:ring-ring peer h-4 w-4 shrink-0 rounded-sm border shadow focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
        @update:checked="toggleOption(String(value), $event as boolean)"
      >
        <CheckboxIndicator
          class="flex items-center justify-center text-current"
        >
          <svg
            class="h-3 w-3"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            stroke-width="3"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M5 13l4 4L19 7"
            />
          </svg>
        </CheckboxIndicator>
      </CheckboxRoot>
      <Label :for="`${field.name}_${value}`">{{ label }}</Label>
    </div>
  </div>

  <!-- Single boolean checkbox -->
  <div v-else class="flex items-center gap-2">
    <CheckboxRoot
      :id="field.name"
      :checked="!!modelValue"
      :disabled="field.readonly"
      class="border-input ring-offset-background focus-visible:ring-ring peer h-4 w-4 shrink-0 rounded-sm border shadow focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
      @update:checked="$emit('update:modelValue', $event)"
    >
      <CheckboxIndicator class="flex items-center justify-center text-current">
        <svg
          class="h-3 w-3"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          stroke-width="3"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M5 13l4 4L19 7"
          />
        </svg>
      </CheckboxIndicator>
    </CheckboxRoot>
    <Label :for="field.name">{{ field.label }}</Label>
  </div>
</template>
