import React from 'react'
import { View, ScrollView, Text, StyleSheet, Image, ImageBackground, TouchableOpacity } from 'react-native'
import Theme from '../theme.style.js';

export default function BoardCarousel(props) {
  
  const [scrollView, setscrollView] = React.useState(null);
  let interval;

  React.useEffect(() => {
    // setInterval(function(){
    //   // if(scrollView) scrollView.scrollTo({x: 0, y: `${100 * props.intervals}%`, animated: true})
    //   if(scrollView) scrollView.scrollTo({x: 0, y: 100, animated: true})
    //   // console.log(scrollView.isTouching)
    // }, 3000)
    // return () => {
    //   clearInterval(interval)
    // }
  }, [])

  return (
    <View style={styles.container}>
    <ScrollView
      ref={(el) => setscrollView(el)}
      horizontal={true}
      contentContainerStyle={{ ...styles.scrollView, width: `${100 * props.intervals}%` }}
      showsHorizontalScrollIndicator={false}
      onContentSizeChange={props.onContentSizeChange}
      onScroll={props.onScroll}
      scrollEventThrottle={200}
      pagingEnabled
      decelerationRate="fast"
    >
    {props.items.map((item, index) => {
      return (
        <TouchableOpacity activeOpacity={1} key={index} style={{flex: 1, width: '100%', backgroundColor: '#fff', borderRadius: 15}}>
          <Image source={item ? {uri: item} : {uri: ''}} style={{width: '100%', height: '100%', resizeMode: 'stretch', borderRadius: 15}} />
        </TouchableOpacity>
      )
    })}
  </ScrollView>
  <View style={styles.bullets}>
    {props.bullets}
  </View>
  </View>)
}

const styles = StyleSheet.create({
  statsHead: {
    paddingTop: 10,
    paddingHorizontal: 12,
  },
  container: {
    height: '100%',
    width: '100%',
    backgroundColor: '#fbfbfb',
    shadowColor: '#fcfcfc',
    shadowOpacity: 1,
    shadowOffset: {
      width: 0,
      height: 5
    },
  },
  scrollView: {
    display: 'flex',
    flexDirection: 'row',
    overflow: 'hidden',
    width: '100%',
    height: '100%'
  },
  bullets: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 10,
    paddingTop: 20,
  }
});