import React from 'react'
// import { Link } from 'react-router-dom'

/* Media */
import './auth-social.css'

/* Views & Components */


/* Models */


/* UI Framework */
import { Button, Pane } from 'evergreen-ui'



const SocialForm = (props) => {
    const user_hash = props.user_hash
    const source = props.source
    const user_data = {
        "user_hash": user_hash,
        "source": source
    }
    const endpoint_params = encodeURIComponent(JSON.stringify(user_data))
    // const google_endpoint = `https://api.chroma.vision/oauth/google?state=${endpoint_params}`
    const google_endpoint = `https://api.chroma.vision/auth/chroma/google?state=${endpoint_params}`
    const facebook_endpoint = `https://api.chroma.vision/oauth/facebook?state=${endpoint_params}`

    const target = (source === 'electron') ? "_blank" : ""
    
    return (
        <Pane className="social-form">
            {/* Google */}
            {/* <a href="https://api.chroma.vision/oauth/google"> */}
            <a href={google_endpoint} target={target}>
                <Button className="google" iconBefore="cog">Login with Google</Button>
            </a>

            {/* Facebook */}
            <a href={facebook_endpoint} target={target}>
                <Button className="facebook" iconBefore="cog">Login with Facebook</Button>
            </a>
        </Pane>
    );
}

export default SocialForm
