import React from 'react'
import {
  FlatList,
  ListRenderItem,
  Modal,
  Pressable,
  Text,
  View,
  ViewStyle,
} from 'react-native'

import { colors } from '../Colors'
import { TextStyles } from '../Styles'
import { TopCloseXButton } from '../components/TopCloseXButton'

export function SelectorModal<T>({
  items,
  renderItem,
  keyExtractor,
  modalIsOpen,
  setModalIsOpen,
  title,
  contentStyle,
}: {
  items: T[]
  renderItem: ListRenderItem<T>
  keyExtractor: (item: T, index: number) => string
  modalIsOpen: boolean
  setModalIsOpen: (state: boolean) => void
  title?: string
  contentStyle?: ViewStyle
}) {
  return (
    <Modal
      animationType="fade"
      transparent
      visible={modalIsOpen}
      onRequestClose={() => {
        setModalIsOpen(false)
      }}
    >
      <Pressable
        onPress={() => setModalIsOpen(false)}
        style={{
          flex: 1,
          justifyContent: 'flex-end',
          backgroundColor: '#000000cc',
        }}
      >
        <View
          style={[
            {
              borderTopLeftRadius: 20,
              borderTopRightRadius: 20,
              backgroundColor: colors.metals.metal3,
              padding: 24,
              justifyContent: 'flex-end',
            },
            contentStyle,
          ]}
        >
          <View
            style={{ flexDirection: 'row', justifyContent: 'space-between' }}
          >
            <Text style={[TextStyles.h4, { color: colors.white, height: 48 }]}>
              {title}
            </Text>
            <TopCloseXButton
              onPress={() => {
                setModalIsOpen(false)
              }}
            />
          </View>

          <FlatList<T>
            data={items}
            renderItem={renderItem}
            keyExtractor={keyExtractor}
            style={{
              flexGrow: 0,
            }}
            scrollEnabled={false}
            accessibilityLabel={title}
            accessibilityRole="radiogroup"
          />
        </View>
      </Pressable>
    </Modal>
  )
}