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} />;
  };

  const slideChange = (index: number) => {
    setSlide(index);
  };

  return (
    <View style={{height: '100%'}}>
      <AppIntroSlider
        style={{backgroundColor}}
        data={files}
        renderItem={renderItem}
        showDoneButton={false}
        showNextButton={false}
        onSlideChange={slideChange}
      />
      <View style={{padding: 20, backgroundColor}}>
        <Button title="Pick" onPress={pick} />
      </View>
    </View>
  );
}