import React,{ Component} from 'react';
import {StyleSheet,View,Text,Image} from 'react-native';
import {PagerDotIndicator,IndicatorViewPager} from 'rn-viewpager';
import BaseScreen from './../BaseScreen'
import I18n from 'react-native-i18n'
require('./../../utils/Translations')
const theme=require('./../../utils/theme.json')
import {responsiveWidth,responsiveHeight} from 'react-native-responsive-dimensions'
//let rootHelp='./../../datas/img/slider/slide';
const guideUser=[
  /*  {
        title:I18n.t('TEXT_GUIDE_USER_1'),
        path:require("./../../datas/img/slider/guide_user_1.jpg")},

    {   title:I18n.t('TEXT_GUIDE_USER_2'),
        path:require("./../../datas/img/slider/guide_user_3.jpg"),
    },
    {
        title:I18n.t('TEXT_GUIDE_USER_4'),
        path:require("./../../datas/img/slider/guide_user_4.jpg"),

    },
    {
        title:I18n.t('TEXT_GUIDE_USER_7'),
        path:require("./../../datas/img/slider/guide_user_7.jpg"),
    },
    {
        title:I18n.t("TEXT_GUIDE_USER_3"),
        path:require("./../../datas/img/slider/guide_user_2.jpg"),
    },
    {
        title:I18n.t('TEXT_GUIDE_USER_5'),
        path: require("./../../datas/img/slider/guide_user_5.jpg"),
    },

    {
        title:I18n.t('TEXT_GUIDE_USER_6'),
        path:require("./../../datas/img/slider/guide_user_6.jpg"),
    },
    {
        title:I18n.t('TEXT_GUIDE_USER_6'),
        path:require("./../../datas/img/slider/guide_user_8.jpg"),
    },*/
]
const guideAgent=[
  /*  {
        title:I18n.t('TEXT_GUIDE_USER_10'),
        path:require("./../../datas/img/slider/guide_user_10.jpg")},
    {
        title:I18n.t('TEXT_GUIDE_USER_11'),
        path:require("./../../datas/img/slider/guide_user_11.jpg")},*/
]
export default  class Help extends BaseScreen{
    static navigatorStyle = {
        drawUnderNavBar: true,
        navBarHidden:true,
        drawUnderStatusBar: false,
        statusBarHidden: true,
        statusBarTextColorScheme: 'light',
    };


    constructor(props){
        super(props,true)
        this.state={
            items:[]
        }
        const { navigation } = this.props;
        this.type = navigation.getParam('type',0);

    }
    componentDidMount(){
        this.renderItems()
    }

    render(){
        const listhelp=this.type===1?guideAgent:guideUser;
        return (
            <View style={{flex:1}}>
            <IndicatorViewPager
                style={{flex:1}}
                indicator={this._renderDotIndicator()}
            >
                    <View style={{flex: 1}}>
                      
                       </View>
                {listhelp.map((item,index)=>{
                    return (
                        <View style={{flex: 1,backgroundColor:this.props.type===1?theme.primaryDark:theme.primary}}>
                            <Text style={{color:'white',fontSize:20,
                                marginLeft:responsiveWidth(5),
                                marginRight:responsiveWidth(5),
                                marginTop:responsiveHeight(2),
                                fontWeight:'bold',
                                marginBottom:responsiveHeight(2)}}>{item.title}</Text>
                                <Image
                                    style={{flex: 1,width:responsiveWidth(100),height:responsiveHeight(100)}}
                                    source={item.path}
                                />
                            </View>)
                    }
                )}
            </IndicatorViewPager>
            </View>
                )
    }
    renderItems(){
        let items=[];
        for(let i=1;i<=this.type===1?guideAgent.length:guideUser.length;i++){
            items.push(i);
        }
        this.setState({items:items})
    }
    _renderDotIndicator() {
        return <PagerDotIndicator pageCount={this.type===1?guideAgent.length:guideUser.length+1} />;
    }

}
class HelpPage extends React.PureComponent{
    constructor(props){
        super(props)
        console.log('in contructeur')
        console.log(props.path)
    }
    render(){
        return (
            <View
                style={{flex:1,backgroundColor:'green'}}
            >
                <Image/>

            </View>
        )
    }
}