import React, { Component } from "react";
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Alert,
  SafeAreaView,
  Image
} from "react-native";
import { observable } from "mobx";
import { observer, inject } from "mobx-react/native";
import ScrollableTabView from "react-native-scrollable-tab-view";
import { scale, verticalScale, moderateScale } from "react-native-size-matters";
import Icon from "react-native-vector-icons/dist/MaterialCommunityIcons";
// function
import { width, height } from "../../config/screen";
import theme from "../../config/colors";
import { Fonts } from "../../config/fonts";
import Size from "../../config/size";
import AsyncStorageHelper from "../../config/asyncStorageHelper";
import language from "../../config/language";
const asyncStorageHelper = new AsyncStorageHelper();
import Swiper from "react-native-swiper";
var size = new Size();
@inject(["menuStore"], ["userStore"])
@observer
export default class Tutorial extends Component {
  constructor(props) {
    super(props);
    this.store = this.props.userStore;
    this.menuStore = this.props.menuStore;
  }
  componentWillMount() {
    const { navigation } = this.props;
    this.data = navigation.getParam("data", {});
    console.log(this.data);
  }

  init() {
    console.log(this.store.logined);
    if (!this.store.logined) {
      //   this.props.navigation.navigate("Login");
    } else {
    }
  }

  navigatieAction(page, Param) {
    this.props.navigation.navigate(page, Param);
  }

  closeButton() {
    return (
      <Icon
        name="close-circle"
        size={size.getSize(30)}
        color={'white'}
        style={{ position: "absolute", top: 15,left:10 }}
        onPress={() => this.finish()}
      />
    );
  }

  swiper(){
    if(this.store.languageSelection === 'english'){
     return(
      <Swiper
      style={styles.wrapper}
      activeDot={
        <View
          style={{
            backgroundColor: "white",
            width: 8,
            height: 8,
            borderRadius: 4,
            marginLeft: 3,
            marginRight: 3,
            marginTop: 3,
            marginBottom: 3
          }}
        />
      }
    >
      <View style={styles.slide1}>
        <Image
          source={require("../../images/apppreview_en1.jpg")}
          style={styles.image}
        />
        {this.closeButton()}
      </View>
      <View style={styles.slide1}>
        <Image
          source={require("../../images/apppreview_en2.jpg")}
          style={styles.image}
        />
        {this.closeButton()}
      </View>
      <View style={styles.slide1}>
        <Image
          source={require("../../images/apppreview_en3.jpg")}
          style={styles.image}
        />
        {this.closeButton()}
      </View>
      <View style={styles.slide1}>
        <Image
          source={require("../../images/apppreview_en4.jpg")}
          style={styles.image}
        />
        {this.closeButton()}
      </View>
    </Swiper>
     )
    }else{
   return(
    <Swiper
    style={styles.wrapper}
    activeDot={
      <View
        style={{
          backgroundColor: "white",
          width: 8,
          height: 8,
          borderRadius: 4,
          marginLeft: 3,
          marginRight: 3,
          marginTop: 3,
          marginBottom: 3
        }}
      />
    }
  >
    <View style={styles.slide1}>
      <Image
        source={require("../../images/apppreview_ch1.jpg")}
        style={styles.image}
      />
      {this.closeButton()}
    </View>
    <View style={styles.slide1}>
      <Image
        source={require("../../images/apppreview_ch2.jpg")}
        style={styles.image}
      />
      {this.closeButton()}
    </View>
    <View style={styles.slide1}>
      <Image
        source={require("../../images/apppreview_ch3.jpg")}
        style={styles.image}
      />
      {this.closeButton()}
    </View>
    <View style={styles.slide1}>
      <Image
        source={require("../../images/apppreview_ch4.jpg")}
        style={styles.image}
      />
      {this.closeButton()}
    </View>
  </Swiper>
   )
    }
  }

  finish() {
    const { navigation } = this.props;
    var data = navigation.getParam("data", {});
    if (data == "store") {
      this.navigatieAction("LocationRequest");
    } else {
      this.props.navigation.goBack();
    }
  }
  render() {
    return (
      <SafeAreaView style={{ backgroundColor: theme.mainColor, flex: 1 }}>
        <View style={styles.container}>
        
         {this.swiper()}
        </View>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    height: height,
    width: width
  },
  image: {
    width: width,
    height: height
  },
  welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 10
  },
  instructions: {
    textAlign: "center",
    color: "#333333",
    marginBottom: 5
  },
  slide1: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: theme.mainColor
  },
  slide2: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#97CAE5"
  },
  slide3: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#92BBD9"
  },
  text: {
    color: "#fff",
    fontSize: 30,
    fontWeight: "bold"
  }
});