import { PlatformPressable } from '@react-navigation/elements'
import React, { useCallback } from 'react'
import { FlatList, StyleSheet, useWindowDimensions } from 'react-native'
import LinearGradient from 'react-native-linear-gradient'
import {
  COLOR_KEYS,
  type CustomAvatarColorKey,
  getAvatarGradientProps,
} from '../../components/display/utils/avatar_gradient_colors'
import { useTheme } from '../../hooks'
import { GRID_COLUMNS } from './constants'

interface ColorPickerProps {
  selectedColor: string
  onColorSelect: (color: CustomAvatarColorKey) => void
}

export function ColorPicker({ selectedColor, onColorSelect }: ColorPickerProps) {
  const styles = useStyles()

  const renderItem = useCallback(
    ({ item }: { item: CustomAvatarColorKey }) => {
      const gradientProps = getAvatarGradientProps(item)
      const isSelected = item === selectedColor

      return (
        <PlatformPressable
          onPress={() => onColorSelect(item)}
          style={[styles.swatchOuter, isSelected && styles.swatchSelected]}
          accessibilityRole="button"
          accessibilityLabel={`${item.replace(/-/g, ' ')} color`}
          accessibilityState={{ selected: isSelected }}
        >
          <LinearGradient {...gradientProps} style={styles.swatch} />
        </PlatformPressable>
      )
    },
    [selectedColor, onColorSelect, styles.swatch, styles.swatchOuter, styles.swatchSelected]
  )

  return (
    <FlatList
      data={COLOR_KEYS}
      numColumns={GRID_COLUMNS}
      keyExtractor={item => item}
      renderItem={renderItem}
      contentContainerStyle={styles.grid}
      columnWrapperStyle={styles.row}
      scrollEnabled={false}
    />
  )
}

const PADDING = 16
const GAP = 8

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

  return StyleSheet.create({
    grid: {
      paddingHorizontal: PADDING,
      paddingVertical: 12,
    },
    row: {
      gap: GAP,
      marginBottom: GAP,
    },
    swatchOuter: {
      width: swatchSize,
      height: swatchSize,
      borderRadius: swatchSize / 2,
      alignItems: 'center',
      justifyContent: 'center',
    },
    swatchSelected: {
      borderWidth: 3,
      borderColor: colors.interaction,
    },
    swatch: {
      width: innerSize,
      height: innerSize,
      borderRadius: innerSize / 2,
    },
  })
}