import * as React from 'react';
import {useState, useEffect} from 'react';
import { connect } from "react-redux";
import { SafeAreaView, Button, View, Text, Image, ScrollView, StyleSheet, TouchableOpacity } from 'react-native';
import {useNetInfo} from "@react-native-community/netinfo";
import NetInfo from "../../components/netstatus";
// import NetInfo from "@react-native-community/netinfo";
import CustomHeader from '../../components/header.js';
import Assets from '../../components/assets.manager.js';
import Elements from '../../components/elements.js';
import Theme from '../../components/theme.style.js';
import {Icon} from 'react-native-elements';
import DB from '../../components/storage/';
import REQUEST from '../../components/api/';
import CustomSafeArea from '../../components/safeArea.component';

const Content = require("./aboutus.json");

class About extends React.Component {

  constructor(props) {
    super(props)
  }

  state = {
    drop1: false,
    drop2: false,
    data: {},
    connected: false
  }

  componentDidMount() {
    this.initAbount()
  }

  componentWillUnmount() {

  }

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

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

  fetch = (detail) => {
    if(!this.state.connected) return null
    let r = ""
    let d = detail.split(`"`)
    for(var x=0;x<d.length;x++){
      if(!d[x].includes(`:`) && !d[x].includes(`;`)) r += "\u2022 " + d[x] + "\n\n"
    }
    return r
  }

  renderDetails = () => {
    if(!this.state.connected) return null
    return (
    <View>
      <View style={{flex: 0, marginTop: 5}}>
        <View style={{ flexDirection: 'row', justifyContent: 'center'}}>
          <TouchableOpacity activeOpacity={1} style={{flex: 1, flexDirection: 'row'}} onPress={() => this.setState({ drop1: !this.state.drop1 })}>
            <Text style={{flex:3, marginTop: 15, fontWeight: 'bold', fontSize: 16, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>WHAT WE DO</Text>
            <View style={{flex: 1, flexDirection: 'column-reverse', alignItems: 'flex-end', fontWeight: 'normal'}}>
              <Icon name={ this.state.drop1 ? "expand-more" : "chevron-right"} color="gray" />
            </View>
          </TouchableOpacity>
        </View>
        {this.state.drop1 ? <Text style={{fontSize: 16, marginTop: 15, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>{this.fetch(this.state.data.what_we_do_content)}</Text> : null}  
      </View>

      <View style={{flex: 0, marginTop: 15, paddingBottom: 30}}>
        <View style={{ flexDirection: 'row', justifyContent: 'center'}}>
          <TouchableOpacity activeOpacity={1} style={{flex: 1, flexDirection: 'row'}} onPress={() => this.setState({ drop2: !this.state.drop2 })}>
            <Text style={{flex:3, marginTop: 15, fontWeight: 'bold', fontSize: 16, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>WHY UNIOIL</Text>
            <View style={{flex: 1, flexDirection: 'column-reverse', alignItems: 'flex-end', fontWeight: 'normal'}}>
              <Icon name={ this.state.drop2 ? "expand-more" : "chevron-right"} color="gray" />
            </View>
          </TouchableOpacity>
        </View>
        {this.state.drop2 ? <Text style={{fontSize: 16, marginTop: 15, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>{this.fetch(this.state.data.why_unioil_content)}</Text> : null}
      </View>
    </View>)
  }

  render() {
    return (
      <CustomSafeArea>
        <CustomHeader title="About Us" menu={false} navigation={this.props.navigation} />
        {this.state.connected ? <View style={{flex: 1}}> 
          <Image source={Assets.bg.about} style={{width: '100%', height: '38%', resizeMode: 'cover'}} />
          <ScrollView style={{flex: 1, padding: 20}}>
            <Text style={{marginTop: 10, fontSize: 16, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary, fontWeight: 'bold'}}>WHO WE ARE</Text>
            <Text style={{marginTop: 15, fontSize: 15, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>{this.state.data.who_we_are_content}</Text>
            {this.renderDetails()}
            <Text></Text>
          </ScrollView>
        </View> : null }
      </CustomSafeArea>
    );
  }
}

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

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