// Icon picker component
//
// This component is used to pick an icon from material icons

import React from 'react'
import { StyleSheet, FlatList, TouchableOpacity, Modal } from 'react-native'
import { MaterialIcons } from '@expo/vector-icons'
import { colors, spacing } from '../theme'
import { MaterialIconsList } from '../data/icons'
import Paper from './Paper'
import Button from './Button'
import { WIDTH } from '../utils'
import Icon from './Icon'

const IconPicker = ({
  onSelect,
  selected,
  selectorType = 'button', // button, icon, custom
  iconSelectorButtonProps = {},
  iconSelectorIconProps = {},
  IconSelectorComponent = null,
}) => {
  const [icons, setIcons] = React.useState(MaterialIconsList)
  const [show, setShow] = React.useState(false)

  return (
    <>
      <Modal visible={show} animationType='slide'>
        <Paper align='center'>
          <FlatList
            style={styles.flatlist}
            numColumns={4}
            data={icons}
            renderItem={({ item }) => (
              <TouchableOpacity
                style={styles.container}
                onPress={() => {
                  onSelect(item)
                  setShow(false)
                }}
              >
                <MaterialIcons
                  name={item.name}
                  size={WIDTH / 8}
                  color={selected === item ? colors.primary : colors.text}
                />
              </TouchableOpacity>
            )}
          />
        </Paper>
      </Modal>
      {selectorType === 'button' && (
        <Button onPress={() => setShow(true)} {...iconSelectorButtonProps}>
          Select icon
        </Button>
      )}
      {selectorType === 'icon' && (
        <Icon onPress={() => setShow(true)} {...iconSelectorIconProps} />
      )}
      {selectorType === 'custom' && (
        <IconSelectorComponent onPress={() => setShow(true)} />
      )}
    </>
  )
}

const styles = StyleSheet.create({
  flatlist: {
    padding: spacing.s_4,
    width: '100%',
  },

  container: {
    padding: spacing.s_4,
    alignItems: 'center',
    justifyContent: 'center',
  },
})

export default IconPicker