import React, {useState} from 'react';
import { LoginButton, AccessToken } from 'react-native-fbsdk';
import RNKakao from 'react-native-kakao';
import { NaverLogin, getProfile } from 'react-native-naver-login';
import { GoogleSignin, GoogleSigninButton, statusCodes } from 'react-native-google-signin';

import C from 'rn-class'
C.addColor("#03cf5d", "color-naver");

const initials = {
  kConsumerKey: 'VWv4bOdB5Bf07a26eJ5h',
  kConsumerSecret: 'pBASnpI7X5',
  kServiceAppName: 'emptyApp',
  kServiceAppUrlScheme: 'dooboolaburlscheme', // only for iOS
};

GoogleSignin.configure();

export default (props)=>{

  const [userInfo, setUserInfo] = useState(null);
  
  const googoleSignIn = async () => {
    
    try {
      await GoogleSignin.hasPlayServices();
      const result = await GoogleSignin.signIn();
      
      console.log(result);
    } catch (error) {
      if (error.code === statusCodes.SIGN_IN_CANCELLED) {
        // user cancelled the login flow
        console.log('cancel',error);
      } else if (error.code === statusCodes.IN_PROGRESS) {
        // operation (f.e. sign in) is in progress already
        console.log('progress',error);
      } else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
        // play services not available or outdated
        console.log('service not available',error);
      } else {
        // some other error happened
        console.log(error)
      }
    }
  };

    const authLogin = () => {
        props.navigation.navigate('AcceptTerms');
    }
    const kakaoLogin = async () => {
        try {
          const result = await RNKakao.login();
          
            console.log(result);
        } catch (e) {
          
            console.log(`Error: ${e}`);
          
        }
      }
    
      const kakaoLogout = async () => {
        try {
          const result = await RNKakao.logout();
          
            
            console.log(result);
          
        } catch (e) {
          
          console.log(`Error: ${e}`);
          
        }
      }
    
      const  getUserInfo = async () => {
        try {
          const result = await RNKakao.userInfo();
          
          console.log(result);
          
        } catch (e) {
          
          console.log(`Error: ${e}`);
          
        }
      }


      const naverLogin =  async (props) => {
        NaverLogin.login(initials, (err, token) => {
          console.log(`\n\n  Token is fetched  :: ${token} \n\n`);
          // this.setState(); 
          console.log({ theToken: token });
          if (err) {
            console.log(err);
            return;
          }
        });
      
        // return new Promise(function (resolve, reject) {
        //   console.log(props);
        //   NaverLogin.login(props, (err, token) => {
        //     console.log(`\n\n  Token is fetched  :: ${token} \n\n`);
        //     if (err) {
        //       reject(err);
        //       return;
        //     }
        //     resolve(token);
        //   });
        // });
      };  
    return (
        <C.View cls="jc-sa ai-c flx1 bgc-color-white"> 
            <C.ImageBackground source={require("../res/speech_bubble.png")} 
                cls="ai-c jc-c flx0.5 w70" 
                resizeMode="contain"  
                >   
                <C.Text cls="f5"> empty </C.Text> 
            </C.ImageBackground>
            <C.View>
                <C.Text cls="f2.5 ta-c" > 
                    {"Breathe in slowly \nAre you ready?"}
                </C.Text>
            </C.View>
            <C.View  cls="jc-sa flx0.3 w80%">
                {/* <C.EL.Button btncls="bgc-color-facebook" title="Facebook" /> */}
                <LoginButton
                        // style={C.n2cls("w100%") }   
                        onLoginFinished={
                            (error, result) => {
                            if (error) {
                                console.log("login has error: " + result.error);
                            } else if (result.isCancelled) {
                                console.log("login is cancelled.");
                            } else {
                                AccessToken.getCurrentAccessToken().then(
                                (data) => {
                                    console.log(data.accessToken.toString())
                                }
                                )
                            }
                            }
                        }
                        onLogoutFinished={() => console.log("logout.")}/>



                <C.EL.Button btncls="bgc-color-google-plus " title="Google" onPress={googoleSignIn} />
                {/* <GoogleSigninButton
                  style={{ width: 192, height: 48 }}
                  size={GoogleSigninButton.Size.Wide}
                  color={GoogleSigninButton.Color.Dark}
                  onPress={googoleSignIn}
                  disabled={false} /> */}

                <C.EL.Button btncls="bgc-color-kakao " tcls="color-kakaotext" title="Kakao" onPress={kakaoLogin}/>

 

                <C.EL.Button btncls="bgc-color-naver " title="Naver"  onPress={naverLogin}/> 
            </C.View>
        </C.View>
    )


}