/*Example of Navigation Drawer with Sectioned Menu*/
import React, { Component } from 'react';
import { StyleSheet, View, Text, Picker, Image, TouchableOpacity, TextInput } from 'react-native';
import AnimateLoadingButton from 'react-native-animate-loading-button';
import { ScrollView } from 'react-native-gesture-handler';
import SearchableDropdown from 'react-native-searchable-dropdown';
import NetInfo from '@react-native-community/netinfo'


export default class Db extends Component {
  static navigationOptions = {
    title: 'Db ',
    tabBarOptions: {
      labelStyle: {
        fontSize: 16,
        color: '#000',
      },
      style: {
        backgroundColor: '#52c5d8',
        borderRadius: 15,
      },
    },
  };

  constructor(props) {
    super(props);
    this.state = {
      listdb: [],
      dbnya: '',
      connection_Status: ""
    }
  }




  _onPressHandler() {
    this.loadingButton.showLoading(true);

    // mock
    setTimeout(() => {
      this.loadingButton.showLoading(false);
    }, 1000);
    if (this.state.connection_Status == "Offline") {
      alert('Poor Internet Connection')
      }
     else if (this.state.Dbname == "" || this.state.Dbname == null) {
      alert('Please Select Database')
     }
    else {
      this.props.navigation.navigate('login', {
        idDbase:this.state.id,
        Dbname:this.state.Dbname
         })
    }
  }


  componentDidMount = () => {

    NetInfo.isConnected.addEventListener('connectionChange', this.handleConnectivityChange);

    NetInfo.isConnected.fetch().done((isConnected) => {
        if (isConnected == true) {
            this.setState({ connection_Status: "Online" })
        }
        else {
            this.setState({ connection_Status: "Offline" })
            alert('Offline Mode No Internet Connection')
        }
      });

    fetch('https://tracessystem.com/apiims/inv_list_db.php', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
          body: JSON.stringify({

          })
        })
        .then((response) => response.json())
        .then((responseJson) => {
          this.setState({
            listdb: responseJson,
          })
        })
        .catch((error) => {
          console.error(error);
        });
      }

      componentWillUnmount = () => {

        //internet
        NetInfo.isConnected.removeEventListener('connectionChange', this.handleConnectivityChange);
        //end internet
    }
        //internet
        handleConnectivityChange = (isConnected) => {
          if (isConnected == true) {
              this.setState({ connection_Status: "Online" })

          }
          else {
              this.setState({ connection_Status: "Offline" })
              alert('No Internet Status')
          }
      };
      //end internet


  render() {
    dblist = this.state.listdb
    return (

      <ScrollView keyboardShouldPersistTaps="handled">
        <View style={styles.backgrondImage}>
          <View style={styles.containerImage}>
            <Image
                source={require('../assets/logotwist.png')}
                style={{ width: 180, height: 60, top: 15 }} />
              <Text></Text>
            </View>
          <View style={styles.containerImage}>
            <Image
                source={require('../assets/Artboard_1.png')}
                style={{ width: 300, height: 180, top: 15 }} />
              <Text></Text>
          </View>
          <View style={styles.BoxVisitCentering}>
            <View style={styles.BoxVisit}>
              <View style={styles.centext}>
                <Text></Text>
                <SearchableDropdown
                  onItemSelect={(item) => {

                    this.setState({
                      id: item.id,
                      Dbname: item.name,
                    });
                  }}
                  containerStyle={{ padding: 5 }}
                  onRemoveItem={(item, index) => {
                    const items = this.state.selectedItems.filter((sitem) => sitem.id !== item.id);
                    this.setState({ selectedItems: items });
                  }}
                  itemStyle={{
                    padding: 10,
                    marginTop: 2,
                    backgroundColor: '#ddd',
                    borderColor: 'skyblue',
                    borderWidth: 1,
                    borderRadius: 5,
                  }}
                  itemTextStyle={{ color: '#222' }}
                  itemsContainerStyle={{ maxHeight: 140 }}
                  items={dblist}
                  defaultIndex={2}
                  resetValue={false}
                  textInputProps={
                    {
                      placeholder: "Select Database",
                      underlineColorAndroid: "transparent",
                      style: {
                        padding: 10,
                        borderWidth: 0.5,
                        borderColor: '#ccc',
                        borderRadius: 5,
                        width: "100%",
                        underlineColorAndroid: '#00A8CC'
                      },
                    }
                  }
                  listProps={
                    {

                    }
                  }
                />
              </View>
              <Text></Text>
              <View style={styles.centeringButton}>
                <AnimateLoadingButton
                  ref={c => (this.loadingButton = c)}
                  width={150}
                  height={40}
                  marginTop={80}
                  title="NEXT"
                  titleFontSize={18}
                  titleColor="rgb(255,255,255)"
                  backgroundColor="#00A8CC"
                  borderRadius={25}
                  onPress={this._onPressHandler.bind(this)}
                />
              </View>
              <Text></Text>
            </View>
          </View>
        </View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  MainContainer: {
    flex: 1,
    alignItems: 'center',
    marginTop: 50,
    justifyContent: 'center',
  },
  centeringButton: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  BoxVisit:
  {
    textAlign: 'center',
    color: 'grey',
    fontSize: 30,
    backgroundColor: "#fff",
    alignItems: 'center',
    width: 320,
    height: 910,
    borderRadius: 17,
    position: 'absolute',
    top: 50,
  },
  centext: {
    width: '60%',
  },
  BoxVisitCentering: {
    alignItems: 'center',
  },
  Merge: { flexDirection: "row" },

  containerImage: {

    backgroundColor: "#FFA41B",
    justifyContent: 'center',
    alignItems: 'center',

  },
  backgrondImage: {
    backgroundColor: "#FFA41B",
    height: 990
  },
  BorddererText:
  {
    color: 'gray',
    textAlign: 'left',
    fontSize: 18,
    marginRight: 10,
    marginLeft: 30,
    marginTop: 10,
    fontWeight: 'bold',
  },
  PickerStyleClass:
  {
    textAlign: 'center',
    backgroundColor: "#fff",
    marginBottom: 10,
    width: '60%',
  },
});