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()
      }
    })
  }

  init = async () => {
    this.setState({ connected: true })
    await REQUEST("contact_us", "get", {}, {}, {}, 
      async (res) => {
        console.log(res)
        if(res.status == 1 && res.data) {
          this.setState({ data: res.data })
        } else {
          console.log(res.message, res.data)
        }
      }, (error) => {  
        console.log(error)
    })
  }

  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}}>
        <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)

// export default function About(navigation) {

//   const [drop1, setdrop1] = useState(false)
//   const [drop2, setdrop2] = useState(false)
//   const [data, setdata] = useState({})
//   const netInfo = useNetInfo()

//   const init = async () => {
//     await REQUEST("contact_us", "get", {}, {}, {}, 
//       async (res) => {
//         if(res.status == 1 && res.data){
//           await setdata(await res.data)
//         }else{
//           console.log(res.message, res.data)
//         }
//       }, function(error){  
//         console.log(error)
//     })
//   }

//   useEffect(() => {
//     NetInfo.fetch().then(state => {
//       console.log("Connection type", state.type);
//       console.log("Is connected?", state.isConnected);
//       if(state.isConnected){
//         init()
//       }else{
//         Elements.nointernet2()
//       }
//     });
//   }, [])

//   const fetch = (detail) => {
//     if(!netInfo.isConnected) 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
//   }

//   // console.log(fetch(data.what_we_do_content))

//   const renderDetails = () => {
//     if(!netInfo.isConnected) 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={() => setdrop1(!drop1)}>
//           <Text style={{flex:3, marginTop: 15, fontWeight: 'bold', fontSize: 16, color: Theme.colors.textPrimary}}>WHAT WE DO</Text>
//           <View style={{flex: 1, flexDirection: 'column-reverse', alignItems: 'flex-end', fontWeight: 'normal'}}>
//             <Icon name={ drop1 ? "expand-more" : "chevron-right"} color="gray" />
//           </View>
//         </TouchableOpacity>
//       </View>
//       {drop1 ? <Text style={{fontSize: 16, marginTop: 15, color: Theme.colors.textPrimary}}>{fetch(data.what_we_do_content)}</Text> : null}  
//     </View>

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

//   return (
//     <SafeAreaView style={{flex: 1}}>
//       <CustomHeader title="About Us" menu={false} navigation={navigation} />
//       {netInfo.isConnected ? <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: Theme.colors.textPrimary, fontWeight: 'bold'}}>WHO WE ARE</Text>
//           <Text style={{marginTop: 15, fontSize: 15, color: Theme.colors.textPrimary}}>{data.who_we_are_content}</Text>
//           {renderDetails()}
//           <Text></Text>
//         </ScrollView>
//       </View> : null }
//     </SafeAreaView>
//   );
// }