import React from 'react'
import {
  Platform,
  StyleSheet,
  Text as ReactNativeText,
  TextProps as ReactNativeTextProps,
} from 'react-native'
import { useTheme } from '../../hooks'
import { platformFontWeightBold } from '../../utils/styles'
import { tokens } from '../../vendor/tapestry/tokens'

// =================================
// ====== Component ================
// =================================

export interface HeadingProps extends ReactNativeTextProps {
  /**
   * Changes the styles and size of the text.
   * Semantically all React Native headings have the same 'hierarchical' level.
   */
  variant?: 'h1' | 'h2' | 'h3' | 'h4'
}

export function Heading({ style, variant = 'h1', children, ...props }: HeadingProps) {
  const styles = useStyles()
  const variantStyleMap = {
    h1: styles.heading1,
    h2: styles.heading2,
    h3: styles.heading3,
    h4: styles.heading4,
  }

  return (
    <ReactNativeText
      style={[styles.global, variantStyleMap[variant], style]}
      accessibilityRole="header"
      {...props}
    >
      {children}
    </ReactNativeText>
  )
}

// =================================
// ====== Styles ===================
// =================================

const useStyles = () => {
  const { colors } = useTheme()

  return StyleSheet.create({
    global: {
      fontFamily: Platform.select({
        ios: 'System',
        android: 'normal',
      }),
    },
    heading1: {
      color: colors.textColorDefaultHeadline,
      fontSize: tokens.fontSize2xl,
    },
    heading2: {
      color: colors.textColorDefaultHeadline,
      fontWeight: platformFontWeightBold,
      fontSize: tokens.fontSizeXl,
    },
    heading3: {
      color: colors.textColorDefaultHeadline,
      fontWeight: platformFontWeightBold,
      fontSize: tokens.fontSizeLg,
    },
    heading4: {
      color: colors.textColorDefaultSecondary,
      fontWeight: platformFontWeightBold,
      fontSize: tokens.fontSizeSm,
      textTransform: 'uppercase',
    },
  })
}