<script lang="ts">
import { tv, type VariantProps } from 'tailwind-variants'
import type { AppConfig } from '@nuxt/schema'
import _appConfig from '#build/app.config'
import theme from '#build/ui/form-field'

const appConfig = _appConfig as AppConfig & { ui: { formField: Partial<typeof theme> } }

const formField = tv({ extend: tv(theme), ...(appConfig.ui?.formField || {}) })

type FormFieldVariants = VariantProps<typeof formField>

export interface FormFieldProps {
  name?: string
  label?: string
  description?: string
  help?: string
  error?: string
  hint?: string
  size?: FormFieldVariants['size']
  required?: boolean
  eagerValidation?: boolean
  validateOnInputDelay?: number
  class?: any
  ui?: Partial<typeof formField.slots>
}

export interface FormFieldSlots {
  label(props: { label?: string }): any
  hint(props: { hint?: string }): any
  description(props: { description?: string }): any
  error(props: { error?: string }): any
  help(props: { help?: string }): any
  default(props: { error?: string }): any
}
</script>

<script lang="ts" setup>
import { computed, ref, inject, provide, type Ref } from 'vue'
import { Label } from 'radix-vue'
import type { FormError, FormFieldInjectedOptions } from '#ui/types/form'
import { useId } from '#imports'

const props = defineProps<FormFieldProps>()
defineSlots<FormFieldSlots>()

const ui = computed(() => tv({ extend: formField, slots: props.ui })({
  size: props.size,
  required: props.required
}))

const formErrors = inject<Ref<FormError[]> | null>('form-errors', null)

const error = computed(() => {
  return (props.error && typeof props.error === 'string')
    || typeof props.error === 'boolean'
    ? props.error
    : formErrors?.value?.find(error => error.name === props.name)?.message
})

const inputId = ref(useId())

provide<FormFieldInjectedOptions<FormFieldProps>>('form-field', {
  error,
  inputId,
  name: computed(() => props.name),
  size: computed(() => props.size),
  eagerValidation: computed(() => props.eagerValidation),
  validateOnInputDelay: computed(() => props.validateOnInputDelay)
})
</script>

<template>
  <div :class="ui.root({ class: props.class })">
    <div :class="ui.wrapper()">
      <div v-if="label || $slots.label" :class="ui.labelWrapper()">
        <Label :for="inputId" :class="ui.label()">
          <slot name="label" :label="label">
            {{ label }}
          </slot>
        </Label>
        <span v-if="hint || $slots.hint" :class="ui.hint()">
          <slot name="hint" :hint="hint">
            {{ hint }}
          </slot>
        </span>
      </div>

      <p v-if="description || $slots.description" :class="ui.description()">
        <slot name="description" :description="description">
          {{ description }}
        </slot>
      </p>
    </div>

    <div :class="[label && ui.container()]">
      <slot :error="error" />

      <p v-if="(typeof error === 'string' && error) || $slots.error" :class="ui.error()">
        <slot name="error" :error="error">
          {{ error }}
        </slot>
      </p>
      <p v-else-if="help || $slots.help" :class="ui.help()">
        <slot name="help" :help="help">
          {{ help }}
        </slot>
      </p>
    </div>
  </div>
</template>
