// Utilities
import { computed, isRef } from 'vue'
import { destructComputed, propsFactory, isCssColor } from '@/utils'

// Types
import type { CSSProperties, Ref } from 'vue'

export const makeColorsProps = propsFactory(
  {
    color: {
      type: String,
      default: 'primary',
    },
  },
  'color'
)

type ColorValue = string | false | null | undefined

export interface TextColorData {
  textColorClasses: Ref<string[]>
  textColorStyles: Ref<CSSProperties>
}

export interface BackgroundColorData {
  backgroundColorClasses: Ref<string[]>
  backgroundColorStyles: Ref<CSSProperties>
}

// Composables
export function useColor(
  colors: Ref<{ background?: ColorValue; text?: ColorValue }>
) {
  return destructComputed(() => {
    const classes: string[] = []
    const styles: CSSProperties = {}

    if (colors.value.background) {
      if (isCssColor(colors.value.background)) {
        styles.backgroundColor = colors.value.background
      } else {
        classes.push(`bg-${colors.value.background}`)
      }
    }

    if (colors.value.text) {
      if (isCssColor(colors.value.text)) {
        styles.color = colors.value.text
        styles.caretColor = colors.value.text
      } else {
        classes.push(`text-${colors.value.text}`)
      }
    }

    return { colorClasses: classes, colorStyles: styles }
  })
}

export function useTextColor(color: Ref<ColorValue>): TextColorData
export function useTextColor<T extends Record<K, ColorValue>, K extends string>(
  props: T,
  name: K
): TextColorData
export function useTextColor<T extends Record<K, ColorValue>, K extends string>(
  props: T | Ref<ColorValue>,
  name?: K
): TextColorData {
  const colors = computed(() => ({
    text: isRef(props) ? props.value : name ? props[name] : null,
  }))

  const { colorClasses: textColorClasses, colorStyles: textColorStyles } =
    useColor(colors)

  return { textColorClasses, textColorStyles }
}

export function useBackgroundColor(color: Ref<ColorValue>): BackgroundColorData
export function useBackgroundColor<
  T extends Record<K, ColorValue>,
  K extends string
>(props: T, name: K): BackgroundColorData
export function useBackgroundColor<
  T extends Record<K, ColorValue>,
  K extends string
>(props: T | Ref<ColorValue>, name?: K): BackgroundColorData {
  const colors = computed(() => ({
    background: isRef(props) ? props.value : name ? props[name] : null,
  }))

  const {
    colorClasses: backgroundColorClasses,
    colorStyles: backgroundColorStyles,
  } = useColor(colors)

  return { backgroundColorClasses, backgroundColorStyles }
}