// Composables
import { useColor } from '@/composables/colors'

// Utilities
import { computed, unref } from 'vue'
import { getCurrentInstanceName, propsFactory } from '@/utils'

// Types
import type { PropType } from 'vue'
import type { MaybeRef } from '@/utils'

export const allowedVariants = ['default', 'outline', 'text', 'plain'] as const

export type Variant = (typeof allowedVariants)[number]

export interface VariantProps {
  color?: string
  variant: Variant
}

// export function genOverlays(isClickable: boolean, name: string) {
//   return (
//     <>
//       {isClickable && <span key="overlay" class={`${name}__overlay`} />}
//
//       <span key="underlay" class={`${name}__underlay`} />
//     </>
//   )
// }

export const makeVariantProps = propsFactory(
  {
    color: { type: String, default: 'white' },
    variant: {
      type: String as PropType<Variant>,
      default: 'default',
      validator: (v: any) => allowedVariants.includes(v),
    },
  },
  'variant'
)

export function useVariant(
  props: MaybeRef<VariantProps>,
  name = getCurrentInstanceName()
) {
  const variantClasses = computed(() => {
    const { variant } = unref(props)
    return `${name}--variant-${variant}`
  })

  const { colorClasses, colorStyles } = useColor(
    computed(() => {
      const { variant, color } = unref(props)
      return {
        [['elevated', 'flat'].includes(variant) ? 'background' : 'text']: color,
      }
    })
  )

  return { colorClasses, colorStyles, variantClasses }
}