import { ref, computed, watch, defineEmits } from 'vue'
import { themes } from '~/config/form-themes.js'

export const inputProps = {
  id: { type: String, default: null },
  name: { type: String, required: true },
  label: { type: String, required: false },
  form: { type: Object, required: false },
  value: { required: false },
  required: { type: Boolean, default: false },
  disabled: { type: Boolean, default: false },
  placeholder: { type: String, default: null },
  uppercaseLabels: { type: Boolean, default: false },
  help: { type: String, default: null },
  helpPosition: { type: String, default: 'below_input' },
  theme: { type: Object, default: () => themes.default },
  color: { type: String, default: '#3B82F6' },
  wrapperClass: { type: String, default: 'relative mb-3' }
}

export function useFormInput (props) {
  const content = ref(props.modelValue)

  const inputStyle = computed(() => {
    return {
      '--tw-ring-color': props.color
    }
  })

  const hasValidation = computed(() => {
    return props.form !== null && props.form !== undefined && props.form.hasOwnProperty('errors')
  })

  const hasError = computed(() => {
    return hasValidation && props.form?.errors.has(name)
  })

  const compVal = computed({
    get: () => {
      if (props.form) {
        return props.form[props.name]
      }
      return content.value
    },
    set: (val) => {
      if (props.form) {
        props.form[props.name] = val
      } else {
        content.value = val
      }

      if (hasValidation.value) {
        props.form.errors.clear(props.name)
      }

      defineEmits('update:modelValue', compVal.value)
    }
  })

  // Watch for changes in props.modelValue and update the local content
  watch(
    () => props.modelValue,
    (newValue) => {
      content.value = newValue
    }
  )

  return {
    compVal,
    inputStyle,
    hasValidation,
    hasError
  }
}