import React from 'react'
import { Pressable, StyleSheet } from 'react-native'
import type { PressableProps } from 'react-native'
import { Icon, type IconString } from '../../../components/display/icon'
import { useTheme, useFontScale, useCreateAndroidRippleColor } from '../../../hooks'
import { platformPressedOpacityStyle } from '../../../utils'
import { tokens } from '../../../vendor/tapestry/tokens'

interface ListHeaderActionButtonProps extends PressableProps {
  /**
   * Provides context to screen readers about what the button does.
   */
  accessibilityLabel: string
  /**
   * Specifies the maximum size a font can reach when allowFontScaling is enabled.
   */
  maxFontSizeMultiplier?: number
  /**
   * Generates an icon from `@planningcenter/icons`
   */
  name: IconString
}

export function ListHeaderActionButton({
  accessibilityLabel,
  maxFontSizeMultiplier,
  name,
  ...props
}: ListHeaderActionButtonProps) {
  const styles = useStyles({ maxFontSizeMultiplier })
  const { colors } = useTheme()
  const androidRippleColor = useCreateAndroidRippleColor({
    color: colors.iconColorDefaultSecondary,
  })

  return (
    <Pressable
      style={({ pressed }) => [styles.pressable, pressed && platformPressedOpacityStyle]}
      accessibilityRole="button"
      accessibilityLabel={accessibilityLabel}
      android_ripple={{
        color: androidRippleColor,
        borderless: false,
        foreground: true,
      }}
      {...props}
    >
      <Icon name={name} style={styles.icon} maxFontSizeMultiplier={maxFontSizeMultiplier} />
    </Pressable>
  )
}

const useStyles = ({ maxFontSizeMultiplier }: Partial<ListHeaderActionButtonProps>) => {
  const { colors, button } = useTheme()
  const fontScale = useFontScale({ maxFontSizeMultiplier })

  return StyleSheet.create({
    pressable: {
      borderRadius: button.borderRadius * fontScale,
      borderWidth: 1,
      borderColor: colors.borderColorDefaultBase,
      backgroundColor: 'transparent',
      paddingHorizontal: 16 * fontScale,
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'center',
      height: 32 * fontScale,
      gap: 6 * fontScale,
      overflow: 'hidden',
    },
    icon: {
      fontSize: tokens.fontSizeSm * fontScale,
      color: colors.iconColorDefaultSecondary,
    },
  })
}