import React, {useState, useEffect} from 'react';
import RNSInfo from 'react-native-sensitive-info';
import SInfo from 'react-native-sensitive-info';
import DropDown from './DropDown';
import {
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
  TouchableHighlight,
  TextInput,
  ScrollView,
  Modal,
  TouchableOpacity,
} from 'react-native';
import {Icon} from 'react-native-elements';

const RegisterUserScreen = ({navigation}) => {
  const [username, setUsername] = useState('');
  const [orgname, setOrgname] = useState('');
  const [password, setPassword] = useState('');
  const [token, setToken] = useState('');
  const [message, setMessage] = useState('');
  const [error, setError] = useState('');
  var [isPress, setIsPress] = useState(false);
  const [selectedOrg, setSelectedOrg] = useState('select organization...');
  const [isModalVisible, setisModalVisible] = useState(false);
  const changeModalVisibility = bool => setisModalVisible(bool);
  const setData = option => setSelectedOrg(option);
  const options = ['mod', 'tenant', 'owner'];
  useEffect(() => {
    setError('');
  }, []);

  const setKey = async (key, value) => {
    return SInfo.setItem(key, value, {
      sharedPreferencesName: 'mySharedPrefs',
      keychainService: 'myKeychain',
    });
  };
  const getKey = async key => {
    return RNSInfo.getItem(key, {
      sharedPreferencesName: 'mySharedPrefs',
      keychainService: 'myKeychain',
    });
  };

  const adaptOrgName = org => {
    if (org === 'tenant') {
      setSelectedOrg('Org1');
    }
    if (org === 'owner') {
      setSelectedOrg('Org2');
    }
    if (org === 'mod') {
      setSelectedOrg('Org3');
    }

    return selectedOrg;
  };
  const register_user = async () => {
    console.log('register user touched');

    var data = {
      username: username,
      orgName: adaptOrgName(selectedOrg),
      transient: JSON.stringify({
        user: {
          username: username,
          email: username,
          password: password,
          phonenumber: 0,
          pricing: 'free',
          organization: adaptOrgName(selectedOrg),
        },
      }),
    };
    await fetch('http://192.168.29.141:4000/users/register', {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    })
      .then(function (response) {
        //console.log("response ", response);
        return response.json();
      })
      .then(async function (response_data) {
        console.log('\nresponse data ', response_data);
        navigation.navigate('LoginUserScreen');
      })
      .catch(error => {
        setError(error);
        console.log('error ' + error);
      });
  };
  const register_fabric = async (username_fab, orgname_fab) => {
    console.log('register fabric touched');
    var data = {
      username: username_fab,
      orgName: orgname_fab,
    };
    await fetch('http://192.168.29.141:4000/users', {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    })
      .then(function (response) {
        console.log('response ', response);
        //const cred = await Keychain.setGenericPassword(JSON.stringify(response));
        return response.json();
      })
      .then(async function (response_data) {
        console.log('\n data ', response_data);
        console.log(
          '\n data success',
          response_data.success + typeof response_data.success,
        );
        if (response_data.success) {
          await setKey('token', response_data.token);
          setToken(response_data.token);
          setMessage(response_data.message);
        }
        var key_token = await getKey('token');
        console.log('retrived key_token ' + key_token);
      })
      .catch(error => {
        setError(error);
        console.log('error ' + error);
      });
  };

  var touchProps = {
    activeOpacity: 1,
    underlayColor: 'white',
    style: isPress ? styles.btnPress : styles.btnNormal,
    onHideUnderlay: () => setIsPress(false),
    onShowUnderlay: () => setIsPress(true),
    onPress: register_user,
  };

  var textInputProps = {
    style: styles.input,
    placeholderTextColor: '#4b4a4a',
  };
  var inputHeadingProps = {
    style: styles.inputHeading,
  };
  return (
    <>
      <StatusBar backgroundColor="#ffffff" barStyle="dark-content" />
      <View style={styles.viewRoot}>
        <View
          style={{
            flexDirection: 'row',
            justifyContent: 'flex-start',
            alignItems: 'flex-start',
            marginTop: '-40%',
          }}>
          <TouchableHighlight
            onPress={() => navigation.goBack()}
            style={{activeOpacity: 1, underlayColor: 'red', color: 'white'}}>
            <Icon name="arrow-back" type="ionicon" size={36} color="#206ba5" />
          </TouchableHighlight>
        </View>
        <Text style={styles.heading}>Register</Text>
        <View style={{alignItems: 'center'}}>
          <View style={{flexDirection: 'column', marginTop: '5%'}}>
            <Text {...inputHeadingProps}>Username </Text>
            <TextInput
              {...textInputProps}
              keyboardDismissMode="none"
              defaultValue={username}
              placeholder="Name of the user"
              onChangeText={setUsername}
            />
          </View>
          <View style={{flexDirection: 'column', marginTop: '5%'}}>
            <TouchableOpacity
              onPress={() => changeModalVisibility(true)}
              style={styles.touchableopacity}>
              <Text style={styles.dropdownText}>{selectedOrg}</Text>
            </TouchableOpacity>
            <Modal
              transparent={true}
              animationType="fade"
              visible={isModalVisible}
              nRequestClose={() => changeModalVisibility(false)}>
              <DropDown
                changeModalVisibility={changeModalVisibility}
                setData={adaptOrgName}
                options={options}
              />
            </Modal>
          </View>
          <View style={{flexDirection: 'column', marginTop: '5%'}}>
            <Text {...inputHeadingProps}>Password</Text>
            <TextInput
              {...textInputProps}
              value={password}
              placeholder="Your password"
              onChangeText={setPassword}
            />
          </View>

          <View
            style={{
              flexDirection: 'row',
              marginTop: '10%',
              justifyContent: 'center',
            }}>
            <TouchableHighlight {...touchProps}>
              <Text style={styles.btnText}>Submit</Text>
            </TouchableHighlight>
          </View>

          {message ? (
            <Text style={{color: '#206ba5', fontSize: 25}}>{message}</Text>
          ) : (
            <Text style={{color: '#206ba5', fontSize: 25}}>
              {error.message}
            </Text>
          )}
          <View>
            <Text
              style={{color: '#206ba5', fontSize: 15, textAlign: 'left'}}
              onPress={() => navigation.navigate('LoginUserScreen')}>
              Already a member?
            </Text>
          </View>
        </View>
      </View>
    </>
  );
};

const styles = StyleSheet.create({
  viewRoot: {
    backgroundColor: '#ffffff',
    justifyContent: 'center',
    height: '100%',
    flex: 1,
  },
  heading: {
    color: '#1C254E',
    fontSize: 60,
    textAlign: 'center',
    fontFamily: 'Ubuntu-Bold',
  },
  icon: {
    alignSelf: 'flex-start',
    marginLeft: '28%',
    flexDirection: 'row',
  },
  btnNormal: {
    borderRadius: 10,
    height: 45,
    width: 140,
    backgroundColor: '#1C254E',
    alignItems: 'center',
    justifyContent: 'center',
  },
  btnText: {
    textAlign: 'center',
    fontSize: 22,
    color: 'white',
  },
  btnPress: {
    borderRadius: 10,
    height: 45,
    width: 140,
    backgroundColor: '#1C254E',
    justifyContent: 'center',
  },
  input: {
    height: 60,
    width: 280,
    margin: 12,
    borderRadius: 15,
    padding: 10,
    color: 'black',
    backgroundColor: '#c4c4c4',
  },
  inputHeading: {
    fontSize: 25,
    margin: 12,
    justifyContent: 'center',
    fontFamily: 'Ubuntu-Bold',
    color: '#1C254E',
  },
  dropdownText: {
    margin: 20,
    fontSize: 20,
    fontWeight: 'bold',
  },
});

export default RegisterUserScreen;