import {useState} from 'react'
import {Button, View} from 'react-native'
import AppIntroSlider from 'react-native-app-intro-slider'
import DocumentPicker, {
  DocumentPickerResponse,
} from 'react-native-document-picker'
import {backgroundColor} from './constants'
import Item from './Item'

export default function App() {
  const [files, setFiles] = useState<DocumentPickerResponse[]>([])
  const [slide, setSlide] = useState(0)

  const pick = async () => {
    const picked = await DocumentPicker.pickMultiple()
    console.log(`Picked ${picked.length} files.`)
    setFiles(picked)
  }

  const renderItem = ({
    item,
    index,
  }: {
    item: DocumentPickerResponse
    index: number
  }) => {
    return <Item index={index} slide={slide} value={item} />
  }

  return (
    <View
      style={{
        backgroundColor,
        justifyContent: 'space-between',
        flex: 1,
        flexGrow: 1,
        padding: 10,
      }}>
      <Item />
      <AppIntroSlider
        style={{backgroundColor}}
        data={files}
        renderItem={renderItem}
        onSlideChange={setSlide}
        showDoneButton={false}
        initialNumToRender={3}
      />
      <Button title="Pick" onPress={pick} />
    </View>
  )
}