import React, { Component } from 'react';
import { StyleSheet, View, Text, Image } from 'react-native';
import { IndicatorViewPager, PagerDotIndicator } from 'react-native-best-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>
          )
     }
}