import * as React from 'react';
import { 
  View, 
  Text, 
  Platform, 
  Linking, 
  Alert, 
  TouchableOpacity 
} from 'react-native';
import { connect } from "react-redux";
import { openComposer } from 'react-native-email-link'
import NetInfo from "../../components/netstatus";
import CustomHeader from '../../components/header.js';
import Elements from '../../components/elements.js';
import Icon from '../../components/icons.js';
import REQUEST from '../../components/api/';
import DB from '../../components/storage/index';
import CustomSafeArea from '../../components/safeArea.component';
import { openNumber } from '../../utils/device';

class Contact extends React.Component {

  constructor(props) {
    super(props)
  }

  state = {
    data: {},
    connected: false,
    cn: undefined,
  }

  componentDidMount() {
    this.initContact()
  }

  componentWillUnmount() {

  }

  initContact = () => {
    NetInfo.netstatus(isConnected => {
      if(isConnected) {
        this.init()
      } else {
        Elements.nointernet2(this.props)
      }
    })
  }

  init = async () => {
    let user_profile = await DB.profile();
    
    this.setState({ connected: true, cn: user_profile ? user_profile.data.card_number : undefined })
    await REQUEST("contact_us", "get", {}, {}, {},
      async (res) => {
        if(res.status == 1 && res.data){
          this.setState({ data: res.data })
        }
      }, function(err){
        Alert.alert("Information", `\n${err.message}`);
    }, "ContactOptions", "Fetch")
  }

  getData = (type) => {
    return type == "email" ? this.state.data.contact_email_address_mobile : this.state.data.contact_number_mobile
  }

  render() {
    if(!this.state.connected){
      return (
        <View style={{flex: 1}}>
          <CustomHeader title="Contact Us" menu={false} navigation={this.props.navigation} />
          <Elements.nointernet 
            message="No internet found. Please check your internet connection." 
            buttonText="Try Again" 
            onPress={() => this.init()}
          />
        </View>
      )
    }

    return (
      <CustomSafeArea>
        <CustomHeader title="Contact Us" menu={false} navigation={this.props.navigation} />
        <View style={{flex: 1, padding: 15}}>
          <Text style={{fontSize: 16, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : 'rgba(0, 0, 0, 0.7)', marginBottom: 18}}>
            Our Unioil Customer Service team is ready to assist you if you have any questions or problems using the app.
          </Text>
          <Text style={{fontSize: 16, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : 'rgba(0, 0, 0, 0.7)', marginBottom: 18}}>
            The team is available during office hours only, Mon-Fri, 8:00 AM - 5:00 PM.
          </Text>
          <Text style={{fontSize: 16, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : 'rgba(0, 0, 0, 0.7)', marginBottom: 18}}>
            For immediate response, you may contact us through the following:
          </Text>
  
          <TouchableOpacity onPress={() => {
            openComposer({
              to: this.getData("email") || "loyalty@unioil.com",
              subject: this.state.cn ? `Mobile App Feedback:\nCN${this.state.cn}` : '',
              body: ''
            })
          }} style={{flex: 1, flexDirection: 'row',margin: 15, height: 120, padding: 5}}>
            <View style={{flex: 1, height: 25}}>
              <Icon.Entypo name="mail" size={30} style={{color: '#005598'}} />
            </View>
            <View style={{flex: 5, height: 50}}>
              <Text style={{fontSize: 16, padding: 6, fontWeight: 'bold',  fontFamily: 'Arial', color: '#005598'}}>
                {this.getData("email") || "loyalty@unioil.com"}
              </Text>
            </View>
  
          </TouchableOpacity>
  
          <TouchableOpacity onPress={() => {
            openNumber(this.getData("mobile") || "0286878877")
          }} style={{flex: 1, flexDirection: 'row',margin: 15, padding: 5}}>
  
            <View style={{flex: 1, height: 50}}>
              <Icon.MaterialIcons name="phone" size={30} style={{color: '#005598'}} />
            </View>
            <View style={{flex: 5, height: 50}}>
              <Text style={{fontSize: 16, padding: 6, fontWeight: 'bold',  fontFamily: 'Arial', color: '#005598'}}>
                {this.getData("mobile") || "0286878877"}
              </Text>
            </View>
          </TouchableOpacity>

          {/* <TouchableOpacity onPress={() => {
            let url = "fb://page/140191739947"
              Linking.openURL(url);
            }} style={{flex: 1, flexDirection: 'row',margin: 15, padding: 5}}>
  
            <View style={{flex: 1, height: 50}}>
              <Icon.AntDesign name="facebook-square" size={30} style={{color: '#005598'}} />
            </View>
            <View style={{flex: 5, height: 50}}>
              <Text style={{fontSize: 16, padding: 6, fontWeight: 'bold',  fontFamily: 'Arial', color: '#005598'}}>Unioil</Text>
            </View>
          </TouchableOpacity> */}

          <View style={{flex:30}}></View>
        </View>
      </CustomSafeArea>
    );
  }
}

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

export default connect(mapStateToProps, null)(Contact);