import * as React from 'react';
import { useEffect, useContext, useState} from 'react';
import { connect } from "react-redux";
import { SafeAreaView, Button, View, Text, Image, ImageBackground, ScrollView } from 'react-native';
import { PromosContext } from '../../../context';
import CustomHeader from '../../../components/header.js';
import Elements from '../../../components/elements.js';
import Theme from '../../../components/theme.style.js';
import CustomSafeArea from '../../../components/safeArea.component';

const Promos = (navigation) => {

  // const promo = navigation.route.params || null
  const [type, settype] = useState("")
  const [promo, setpromo] = useState([])
  const [onBackPress, setonBackPress] = useState(null)

  useEffect(() => {
    setpromo(navigation.route.params.data)
    settype(navigation.route.params.type)
    setonBackPress(navigation.route.params.onBackPress)
  }, [])

  const renderPromo = () => {
    return (
      <ScrollView
      bounces={false}
      showsVerticalScrollIndicator={false}
      showsHorizontalScrollIndicator={false}
      style={{flex: 1}}>
        <Image source={{uri: promo.image}} style={{width: '100%', height: 300, resizeMode: 'stretch'}} />
        <View style={{flex: 1, padding: 18}}>
          <Text style={{marginBottom: 20, fontSize: 18, fontWeight: 'bold', color: Theme.colors.accent}}>{promo.title}</Text>
          <Text style={{ color: navigation.app_theme?.theme.colors.text }}>{promo.description || 'asdf'}</Text>
        </View>
      </ScrollView>
    )
  }

  const renderPromoGPS = () => {
    return (
      <ScrollView
      bounces={false}
      showsVerticalScrollIndicator={false}
      showsHorizontalScrollIndicator={false}
      style={{flex: 1}}>
        <Image source={{uri: promo.image}} style={{width: '100%', height: 300, resizeMode: 'stretch'}} />
        <View style={{flex: 1, padding: 18}}>
          <Text style={{marginBottom: 20, fontSize: 18, fontWeight: 'bold', color: Theme.colors.accent}}>{promo.title}</Text>
          <Text style={{ color: navigation.app_theme?.theme.colors.text }}>{promo.description || 'asdf'}</Text>
        </View>
      </ScrollView>
    )
  }

  return (
    <CustomSafeArea>
      <CustomHeader 
        title="" 
        menu={false} 
        back={true} 
        onBackPress={() => {
          navigation.route.params.onBackPress()
          navigation.navigation.goBack()
        }}
        navigation={navigation} 
      />
      {
        promo && promo.type == "promo" ? renderPromo() : renderPromoGPS() 
      }
    </CustomSafeArea>
  );
}

const mapStateToProps = (state) => {
  return {
    app_theme: state.appThemeReducer.theme
  }
}

export default connect(mapStateToProps, null)(Promos)