import colorFunction from 'color'
import React, { useState } from 'react'
import { Platform, StyleSheet } from 'react-native'
import { useTheme } from '../../hooks'
import { platformFontWeightMedium } from '../../utils'
import { Text } from './text'
import type { TextProps } from './text'
import { getColorKey, useButtonColorOptionMap } from './utils/button_colors'
import type { ButtonAppearanceUnion } from './utils/button_colors'

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

interface TextInlineButtonProps extends TextProps {
  /**
   * Updates the button's colors
   */
  appearance?: ButtonAppearanceUnion
}

export function TextInlineButton({
  appearance = 'interaction',
  children,
  disabled = false,
  onPress,
  style,
  ...props
}: TextInlineButtonProps) {
  const styles = useStyles({ appearance, disabled })
  const [isPressed, setIsPressed] = useState(false)

  const platformPressedStyle = Platform.select({
    ios: null,
    android: styles.pressedAndroid,
  })

  return (
    <Text
      accessibilityRole="button"
      numberOfLines={1}
      style={[
        styles.text,
        styles.underline,
        disabled && styles.disabled,
        isPressed && platformPressedStyle,
        style,
      ]}
      onPress={!disabled ? onPress : undefined}
      onPressIn={() => setIsPressed(true)}
      onPressOut={() => setIsPressed(false)}
      {...props}
    >
      {children}
    </Text>
  )
}

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

const useStyles = ({
  appearance = 'interaction',
  disabled = false,
}: Partial<TextInlineButtonProps>) => {
  const { colors } = useTheme()
  const colorKey = getColorKey({ disabled, appearance })
  const colorOptionMap = useButtonColorOptionMap()

  // Android doesn't show a "pressed" state and so we need to simulate it.
  // Lowering the Text's opacity doesn't work as it inherits it's parent's Text's opacity.
  // We can simulate the effect by changing the color's opacity instead.
  const pressedColor = colorFunction(colorOptionMap[colorKey]).alpha(0.5).string()

  return StyleSheet.create({
    text: {
      fontWeight: platformFontWeightMedium,
      color: colorOptionMap[colorKey],
    },
    underline: {
      textDecorationLine: 'underline',
      textDecorationColor: colorOptionMap[colorKey],
      textDecorationStyle: 'solid',
    },
    disabled: {
      color: colors.textColorDefaultDisabled,
    },
    pressedAndroid: {
      color: pressedColor,
    },
  })
}