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

export default function BoardCarousel(props) {
  return (
    <View style={styles.container}><ScrollView
      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 (
        <ImageBackground key={index} source={item.image} style={{flex: 1, resizeMode: "cover", backgroundColor: Theme.colors.primary}}>
          <View style={{flex: 1, flexDirection: 'column', justifyContent: 'flex-end', alignItems: 'flex-start', padding: 30, bottom: Platform.OS == 'ios' ? 60 : 35}}>
            <Text style={{fontSize: 16.5, color: '#fff'}}>{item.title}</Text>
            <Text style={{color: '#fff'}}>{item.subtitle}</Text>  
          </View>
        </ImageBackground>
      )
    })}
  </ScrollView>
  <View style={{position: 'absolute', left: 0, right: 0, bottom: Platform.OS === "ios" ? 40 : 20, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
    <View style={styles.bullets}>
      {props.bullets}
    </View>
    <View style={styles.button}>
      <TouchableOpacity style={{ padding: 10 }} onPress={props.onPress || null}>
        <Text style={{color: Theme.colors.primary, fontSize: 16}}>GET STARTED</Text>
      </TouchableOpacity>
    </View>
  </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: {
    display: 'flex',
    flexDirection: 'row',
    paddingHorizontal: 10,
    paddingTop: 5,
  },
  button: {
    paddingHorizontal: 10,
    paddingTop: 5,
  },
  bullet: {
    paddingHorizontal: 3,
    alignSelf: 'center',
    left: 20
  }
});