//Modules
import React from 'react'
import { TouchableOpacity, Text, StyleSheet, View, Dimensions } from 'react-native';
import Swiper from 'react-native-swiper-hooks'
import { useNavigation } from '@react-navigation/native';

//Components
import { DefaultLayout, Hero, } from '../index';


function Navigate(props) {
    const navigation = useNavigation();
    return(
        <TouchableOpacity style={styles.Btn} onPress = {() => navigation.navigate('Companyprofile', { CompanyDetails: props.Details })}>
            <Text style={styles.white}>Bekijk bedrijf</Text>
        </TouchableOpacity>
    )
}

const windowWidth = Dimensions.get('window').width;

const _renderList = ()=>{
    
  let listData = [
      {
        title:'Bedrijf 1',
        content:'blablablablablablablablablablablablablablablablablablablablablablablablabla',
        discription:'Gespecialiseerd in Ict communicatie',
      },
      {
        title:'Bedrijf 2',
        content:'blablablablablablablablablablablablablablablablablablablablablablablablabla',
        discription:'Gespecialiseerd in Ict communicatie',
      },
      {
        title:'Bedrijf 3',
        content:'blablablablablablablablablablablablablablablablablablablablablablablablabla',
        discription:'Gespecialiseerd in Ict communicatie',
      },
    ]
    return (
      listData.map((item,idx)=>{
        return (
          <View style={styles.carouselwrapper}>
            <View style={styles.carousel} key={idx}>
                <Text style={styles.CarouselText}> {item.title}</Text>
                <Text style={styles.CarouselContent}>{item.content}</Text>
                <View style={{display:'flex', flexDirection:'row'}}>
                  <Text style={{width:'50%'}}>{item.discription}</Text>
                  <View style={{display:'flex', justifyContent: 'center', width:'50%'}}>
                    <Navigate Details={item.title}/>
                  </View>
                </View>
            </View>
          </View>
        )
      })
    )
}


class Home extends React.Component {
  
    render() {
        const windowWidth = Dimensions.get('window').width;
   return (
       <DefaultLayout>
           <Hero HeroHeading="AlfaPrentice" HeroText="De plek ow je ideale stageplek te vinden"/>
           <Text style={styles.SecondaireHeader}>Uitgeligte bedrijven</Text>
           <View>
               <Swiper 
                  height={200}
                  paginationSelectedColor={'#DE0000'}
                  autoplay={true}
                  loop={true}
                  showPagination={true}
                  direction={'row'}
                  >
                  {_renderList()}
                </Swiper>
           </View>
      </DefaultLayout>
   )
}
}

const styles = StyleSheet.create({
    carousel: {
        height:'100%',
        width:windowWidth,
        display: 'flex',
        justifyContent: 'center',
        paddingHorizontal: 30,

    },
    CarouselText: {
        fontSize: 18,
        color: '#DE0000',
        marginBottom: 10,
    },
    CarouselContent: {
        marginBottom:10,
    },
    SecondaireHeader: {
        color: "#003581",
        textAlign: 'center',
        fontSize: 20,
        marginVertical: 15
    },
    carouselwrapper: {
      
      display: 'flex',
      borderTopColor: "#DE0000",
      borderTopWidth: 2,
      borderBottomColor: "#DE0000",
      borderBottomWidth: 2,
      
    },
    Btn: {
      backgroundColor: '#DE0000',
      paddingVertical: 10,
      paddingHorizontal: 15,
      borderRadius: 5,
      width: 120,
      alignSelf: 'flex-end'
  },
  white: {
      color: '#ffffff',
  },
  });

export default Home;