<template>
  <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
    <div
      v-for="(field, index) in fields"
      :key="fieldKey(field, index)"
      class="form-control"
    >
      <label class="label">
        <span class="label-text">{{ field.name }}</span>
        <span v-if="field.required" class="label-text-alt text-error">*</span>
      </label>
      <input
        v-if="field.type === 'text'"
        v-model="field.value"
        type="text"
        class="input input-bordered input-sm md:input-md"
        :required="field.required"
        :disabled="disabled"
      >
      <input
        v-else-if="field.type === 'number'"
        v-model="field.value"
        type="number"
        step="0.01"
        class="input input-bordered input-sm md:input-md"
        :required="field.required"
        :disabled="disabled"
      >
      <select
        v-else-if="field.type === 'select'"
        v-model="field.value"
        class="select select-bordered select-sm md:select-md"
        :required="field.required"
        :disabled="disabled"
      >
        <option value="">Sélectionner...</option>
        <option
          v-for="option in field.options"
          :key="option"
          :value="option"
        >
          {{ option }}
        </option>
      </select>
      <label v-else-if="field.type === 'boolean'" class="flex items-center gap-3 cursor-pointer">
        <input
          v-model="field.value"
          type="checkbox"
          class="toggle toggle-primary toggle-sm md:toggle-md"
          true-value="true"
          false-value="false"
          :disabled="disabled"
        >
        <span class="text-sm" :class="field.value === 'true' ? 'text-success font-medium' : 'text-base-content/60'">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span>
      </label>
      <input
        v-else-if="field.type === 'date'"
        v-model="field.value"
        type="date"
        class="input input-bordered input-sm md:input-md"
        :required="field.required"
        :disabled="disabled"
      >
      <input
        v-else
        v-model="field.value"
        type="text"
        class="input input-bordered input-sm md:input-md"
        :required="field.required"
        :disabled="disabled"
      >
    </div>
  </div>
</template>

<script setup lang="ts">
import { fieldKey, type CustomFieldInput } from '~/shared/utils/customFieldFormUtils'

defineProps<{
  fields: CustomFieldInput[]
  disabled?: boolean
}>()
</script>
