import React from 'react'
import {
  FlatList,
  ListRenderItem,
  Modal,
  Pressable,
  Text,
  View,
} from 'react-native'
import { colorsV2 } from '../Colors'
import { TopCloseXButton } from '../components/TopCloseXButton'
import { TextStylesV2 } from '../Styles'

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

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