import type { VariantProps } from '@gluestack-ui/nativewind-utils'
import { tva } from '@gluestack-ui/nativewind-utils/tva'
import { forwardRef } from 'react'
import { Text as RNText, TextProps } from 'react-native'

const textStyle = tva({
  base: '',
  variants: {
    variant: {
      h1: 'font-[family-name:var(--typography-h1-family)] text-[length:var(--typography-h1-size)] leading-[var(--typography-h1-line-height)] tracking-[var(--typography-h1-letter-spacing)] text-text-header',
      h2: 'font-[family-name:var(--typography-h2-family)] text-[length:var(--typography-h2-size)] leading-[var(--typography-h2-line-height)] tracking-[var(--typography-h2-letter-spacing)] text-text-header',
      h3: 'font-[family-name:var(--typography-h3-family)] text-[length:var(--typography-h3-size)] leading-[var(--typography-h3-line-height)] tracking-[var(--typography-h3-letter-spacing)] text-text-header',
      h4: 'font-[family-name:var(--typography-h4-family)] text-[length:var(--typography-h4-size)] leading-[var(--typography-h4-line-height)] tracking-[var(--typography-h4-letter-spacing)] text-text-header',
      p: 'font-[family-name:var(--typography-p-family)] text-[length:var(--typography-p-size)] leading-[var(--typography-p-line-height)] tracking-[var(--typography-p-letter-spacing)] text-text-paragraph',
      blockquote:
        'font-[family-name:var(--typography-blockquote-family)] text-[length:var(--typography-blockquote-size)] leading-[var(--typography-blockquote-line-height)] tracking-[var(--typography-blockquote-letter-spacing)] text-text-paragraph',
      tableHeader:
        'font-[family-name:var(--typography-table-header-family)] text-[length:var(--typography-table-header-size)] leading-[var(--typography-table-header-line-height)] tracking-[var(--typography-table-header-letter-spacing)] text-text-header',
      table:
        'font-[family-name:var(--typography-table-family)] text-[length:var(--typography-table-size)] leading-[var(--typography-table-line-height)] tracking-[var(--typography-table-letter-spacing)] text-text-paragraph',
      list: 'font-[family-name:var(--typography-list-family)] text-[length:var(--typography-list-size)] leading-[var(--typography-list-line-height)] tracking-[var(--typography-list-letter-spacing)] text-text-paragraph',
      inlineCode:
        'font-[family-name:var(--typography-inlineCode-family)] text-[length:var(--typography-inlineCode-size)] leading-[var(--typography-inlineCode-line-height)] tracking-[var(--typography-inlineCode-letter-spacing)] text-text-label',
      lead: 'font-[family-name:var(--typography-lead-family)] text-[length:var(--typography-lead-size)] leading-[var(--typography-lead-line-height)] tracking-[var(--typography-lead-letter-spacing)] text-text-paragraph',
      large: 'typography-large text-text-header',
      medium: 'typography-medium text-text-header',
      small: 'typography-small text-text-label',
      muted:
        'font-[family-name:var(--typography-muted-family)] text-[length:var(--typography-muted-size)] leading-[var(--typography-muted-line-height)] tracking-[var(--typography-muted-letter-spacing)] text-text-label',
    },
  },
  defaultVariants: {
    variant: 'p',
  },
})

const Text = forwardRef<RNText, TextProps & VariantProps<typeof textStyle>>(({ variant, className, ...props }, ref) => (
  <RNText ref={ref} {...props} className={textStyle({ variant, class: className })} />
))

Text.displayName = 'Text'

export default Text