import * as React from 'react';
import { View } from 'react-native';
import { connect } from "react-redux";
import { saveUserInfo } from "../../redux/actions/AppUserInfoActions";
import NetInfo from "../../components/netstatus";
import Carousel from '../../components/carousel';
import Assets from '../../components/assets.manager.js';
import DB from '../../components/storage';
import Theme from '../../components/theme.style.js';


class OnBoarding extends React.PureComponent {

  constructor(props) {
    super(props)
  }

  slides = [{
    image: Assets.boarding[0],
    title: "Earn Rewards",
    subtitle: "Earn points as fuel rebates or use points to redeem special offers from our partner merchants."
  }, {
    image: Assets.boarding[1],
    title: "Locate Stations",
    subtitle: "Find a Unioil station near you or check fuel prices and products offered through our station locator."
  }, {
    image: Assets.boarding[2],
    title: "Top Up Your Card",
    subtitle: "Load up your card with points to use on your next fuel purchases."
  }, {
    image: Assets.boarding[3],
    title: "Track Vehicle Performance",
    subtitle: "Monitor your fuel efficiency."
  }]

  state = {
    loading: true,
    isGuest: false
  }

  componentDidMount() {
    this.init()
  }

  componentWillUnmount() {

  }

  init = async () => {
    let isGuest = await DB.get("is_guest")
    this.setState({ isGuest: isGuest })
    if(!isGuest){
      NetInfo.netstatus(isConnected => {
        if(isConnected) {
          this.getUserInfo()
        }
      })
    }
  }

  getUserInfo = async () => {
    const SESSION = await DB.session()
    this.props.saveUserInfo({ token: SESSION.token, card_number: SESSION.user.card_number  }).then(data => {
      if(data.status == 1) {
        DB.updateProfile(data, res => {
          this.setState({ loading: false })
        }, err => {
          Alert.alert("Information", `\n${err.message}`)
          this.setState({ loading: false })
        })            
      }
    })
    .catch(error => {})
  }

  validateParamType = () => {
    let object = this.props.route.params?.onBackToMain
    return ({}.toString.call(object) === '[object Function]')
  }

  navigateToMpin = async () => {
    if(this.state.isGuest == 'true') {
      this.props.navigation.navigate("Main")
    } else {
      const USER_PROFILE = await DB.profile()
      const SESSION = await DB.session()

      let sessiondata = {
        card_number: USER_PROFILE.data.cardnumber,
        lcard_uuid: USER_PROFILE.data.lcard_uuid,
        mobile_number: Theme.formatter.PMBL(USER_PROFILE.data.mobile)
      }

      let data = {
        sessiondata: sessiondata,
        token: SESSION.token
      }
      let userDetails = {
        mobile_number: sessiondata.mobile_number,
        mpin: USER_PROFILE.data.mpin
      }
      if(
        userDetails.mpin == undefined || 
        userDetails.mpin == null ||
        userDetails.mpin == ""
      ) {
        this.props.navigation.navigate("Setmpin", data)
        DB.set('set_mpin', 'true', success => {}, error => {})
      } else {
        DB.set('enter_mpin', 'true', success => {}, error => {})
        this.props.navigation.navigate("Mpin", userDetails)
      }
    }
  }

  render() {
    return (
      <View style={{flex: 1}}>
        <Carousel
          type="board"
          style="slides"
          itemsPerInterval={1}
          items={this.slides}
          onPress={() => this.validateParamType() ? this.props.route.params?.onBackToMain() : this.navigateToMpin()}
        />
      </View>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    userinfo: state.appUserInfoReducer.userinfo
  }
}

const mapDispatchToProps = {
  saveUserInfo
}

export default connect(mapStateToProps, mapDispatchToProps)(OnBoarding)