import type { IconName } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
import { PlatformPressable } from '@react-navigation/elements'
import React, { useCallback } from 'react'
import { FlatList, StyleSheet, useWindowDimensions } from 'react-native'
import { useTheme } from '../../hooks'
import { AVATAR_ICON_KEYS, GRID_COLUMNS } from './constants'

interface IconGridProps {
  selectedIconKey: string | null
  onIconSelect: (iconKey: string) => void
}

export function IconGrid({ selectedIconKey, onIconSelect }: IconGridProps) {
  const styles = useStyles()

  const renderItem = useCallback(
    ({ item }: { item: string }) => {
      const isSelected = item === selectedIconKey

      return (
        <PlatformPressable
          onPress={() => onIconSelect(item)}
          style={[styles.cell, isSelected && styles.cellSelected]}
          accessibilityRole="button"
          accessibilityLabel={`${item.replace(/-/g, ' ')} icon`}
          accessibilityState={{ selected: isSelected }}
        >
          <FontAwesomeIcon icon={['fas', item as IconName]} size={20} color="white" />
        </PlatformPressable>
      )
    },
    [selectedIconKey, onIconSelect, styles.cell, styles.cellSelected]
  )

  return (
    <FlatList
      data={AVATAR_ICON_KEYS}
      numColumns={GRID_COLUMNS}
      keyExtractor={item => item}
      renderItem={renderItem}
      contentContainerStyle={styles.grid}
      columnWrapperStyle={styles.row}
      style={styles.list}
    />
  )
}

const PADDING = 16
const GAP = 8

const useStyles = () => {
  const { colors } = useTheme()
  const { width: screenWidth } = useWindowDimensions()
  const cellSize = Math.floor((screenWidth - PADDING * 2 - (GRID_COLUMNS - 1) * GAP) / GRID_COLUMNS)

  return StyleSheet.create({
    list: {
      flex: 1,
    },
    grid: {
      padding: PADDING,
    },
    row: {
      gap: GAP,
      marginBottom: GAP,
    },
    cell: {
      width: cellSize,
      height: cellSize,
      borderRadius: cellSize / 2,
      backgroundColor: colors.fillColorNeutral040,
      alignItems: 'center',
      justifyContent: 'center',
    },
    cellSelected: {
      borderWidth: 3,
      borderColor: colors.interaction,
    },
  })
}