import { useField } from 'vee-validate'
import { computed, ref, toRef } from 'vue'
import type { ComponentInternalInstance } from 'vue'

interface Props {
  id: string
  label?: string
  disabled?: boolean
  modelValue?: boolean | string | number
  trueValue?: boolean | string | number
  falseValue?: boolean | string | number
  required?: boolean
}

export default (props: Props, slots: ComponentInternalInstance['slots']) => {
  const { checked, errorMessage, handleChange } = useField(
    toRef(props, 'id'),
    computed(() => ({
      required: props.required,
    })),
    {
      type: 'checkbox',
      initialValue: props.modelValue,
      checkedValue: props.trueValue ?? true,
      uncheckedValue: props.falseValue ?? false,
      syncVModel: true,
    },
  )

  const focused = ref(false)

  const active = computed(() => !props.disabled)
  const invalid = computed(() => active.value && !!errorMessage.value)
  const hasLabel = computed(() => !!props.label || slots.default)

  return {
    focused,
    checked,
    active,
    invalid,
    hasLabel,
    handleChange,
  }
}