import { computed, nextTick, ref, type ComputedRef, type Ref } from 'vue'

function resolveElement(value: unknown): HTMLElement | null {
  if (!value) return null
  if (value instanceof HTMLElement) return value
  if (typeof value === 'object' && value !== null && '$el' in value) {
    const el = (value as { $el: unknown }).$el
    return el instanceof HTMLElement ? el : null
  }
  return null
}

export function useTableDatePicker(
  selectedDate: Ref<[string, string] | null>,
  onOpen?: () => void,
  pickerRef?: Ref<unknown>,
) {
  const showDatePicker = ref(false)

  const datePickerIndicator: ComputedRef<boolean> = computed(() => selectedDate.value !== null)

  const openDatePicker = () => {
    showDatePicker.value = true
    nextTick(() => {
      onOpen?.()
      const scope = resolveElement(pickerRef?.value) ?? document
      const datePickerInput = scope.querySelector('.el-date-editor') as HTMLInputElement | null
      datePickerInput?.click()
    })
  }

  const closeDatePicker = () => {
    showDatePicker.value = false
  }

  const hideDatePickerIndicator = () => {
    selectedDate.value = null
    showDatePicker.value = false
  }

  const toggleDatePicker = () => {
    if (showDatePicker.value) closeDatePicker()
    else openDatePicker()
  }

  return {
    showDatePicker,
    datePickerIndicator,
    openDatePicker,
    closeDatePicker,
    hideDatePickerIndicator,
    toggleDatePicker,
  }
}