import { ref, computed, inject, WritableComputedRef } from 'vue'
import { psFormKey, psFormItemKey } from '@present-ui/form'
import { useGlobalConfig } from '@present-ui/utils/util'
import radioGroupKey from './token'

import type { ComputedRef } from 'vue'
import type { PsFormContext, PsFormItemContext } from '@present-ui/form'
import type { RadioGroupContext } from './token'

export const useRadio = () => {

  const ELEMENT = useGlobalConfig()
  const psForm = inject(psFormKey, {} as PsFormContext)
  const psFormItem = inject(psFormItemKey, {} as PsFormItemContext)
  const radioGroup = inject(radioGroupKey, {} as RadioGroupContext)
  const focus = ref(false)
  const isGroup = computed(() => radioGroup?.name === 'PsRadioGroup')
  const psFormItemSize = computed(() => psFormItem.size || ELEMENT.size)

  return {
    isGroup,
    focus,
    radioGroup,
    psForm,
    ELEMENT,
    psFormItemSize,
  }
}

interface IUseRadioAttrsProps {
  disabled?: boolean
  label: string | number | boolean
}

interface IUseRadioAttrsState {
  isGroup: ComputedRef<boolean>
  radioGroup: RadioGroupContext
  psForm: PsFormContext
  model: WritableComputedRef<string | number | boolean>
}

export const useRadioAttrs = (props: IUseRadioAttrsProps, {
  isGroup,
  radioGroup,
  psForm,
  model,
}: IUseRadioAttrsState) => {
  const isDisabled = computed(() => {
    return isGroup.value
      ? radioGroup.disabled || props.disabled || psForm.disabled
      : props.disabled || psForm.disabled
  })

  const tabIndex = computed(() => {
    return (isDisabled.value || (isGroup.value && model.value !== props.label)) ? -1 : 0
  })

  return {
    isDisabled,
    tabIndex,
  }

}