import { PlatformPressable } from '@react-navigation/elements'
import { PropsWithChildren } from 'react'
import { StyleSheet, View, ViewStyle } from 'react-native'
import { useTheme } from '../../hooks'
import { Icon, IconProps } from './icon'
import { Text } from './text'

export interface PressableRowProps extends PropsWithChildren {
  isActive?: boolean
  onPress: () => void
  style?: ViewStyle
  textStyle?: any
  text: string
  iconPath?: IconProps['name']
  iconColor?: string
}

export const PressableRow = ({
  children,
  isActive,
  onPress,
  style,
  text,
  textStyle,
  iconPath,
  iconColor,
}: PressableRowProps) => {
  const styles = useRowStyles({ isActive, iconColor })

  return (
    <PlatformPressable
      style={styles.container}
      onPress={onPress}
      accessibilityRole="radio"
      accessibilityState={{ selected: isActive }}
    >
      <View style={[styles.innerContainer, style]}>
        {children}
        <Text style={textStyle}>{text}</Text>
        <Icon
          name={iconPath || 'general.check'}
          size={16}
          style={styles.rowIconRight}
          accessibilityElementsHidden
        />
      </View>
    </PlatformPressable>
  )
}

const ASPECT_RATIO = 16 / 9
const THUMBNAIL_WIDTH = 80
const THUMBNAIL_HEIGHT = THUMBNAIL_WIDTH / ASPECT_RATIO

const useRowStyles = ({
  isActive = false,
  iconColor,
}: { isActive?: boolean; iconColor?: string } = {}) => {
  const theme = useTheme()
  return StyleSheet.create({
    container: {
      paddingLeft: 16,
    },
    innerContainer: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: 12,
      borderBottomWidth: 1,
      borderBottomColor: theme.colors.fillColorNeutral050Base,
      paddingVertical: 12,
      paddingRight: 16,
    },
    borderLessRow: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: 12,
      paddingVertical: 12,
      paddingRight: 16,
      paddingLeft: 16,
    },
    viewMoreButton: {
      flex: 1,
    },
    row: {},
    rowImage: {
      width: THUMBNAIL_WIDTH,
      height: THUMBNAIL_HEIGHT,
      borderRadius: 4,
    },
    rowContent: {
      flexShrink: 1,
    },
    rowIconRight: {
      marginLeft: 'auto',
      color: iconColor || theme.colors.iconColorDefaultDim,
      opacity: isActive ? 1 : 0,
    },
    rowTitle: {
      fontSize: 16,
      flexShrink: 1,
    },
  })
}