import React from 'react'

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faFacebookSquare, faGoogle } from '@fortawesome/free-brands-svg-icons'

/* 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))
    let endpoint
    if (typeof window !== "undefined") {
        endpoint = window.localStorage.chroma_endpoint || 'https://api.chroma.vision'
    }

    const google_endpoint = `${endpoint}/auth/chroma/google?state=${endpoint_params}`
    const steam_endpoint = `${endpoint}/steam?state=${endpoint_params}`
    const facebook_endpoint = `${endpoint}/oauth/facebook?state=${endpoint_params}`

    const target = (source === 'electron') ? "_blank" : ""
    
    const google_icon = "https://chroma-media-platform.s3-us-west-1.amazonaws.com/images/social/google_icon_400.png"
    const steam_icon = "https://chroma-media-platform.s3-us-west-1.amazonaws.com/images/social/steam_icon.png"
    
    const socialAuthClick = (e) => {
        // Send event
        global.dispatchEvent(new CustomEvent('/user/socialauth/init', { bubbles: true, detail: {status: "INIT"} }))

        // Allow normal click event to happen
        return true
    }

    return (
        <Pane className="social-form">
            {/* Google */}
            <a href={google_endpoint} onClick={socialAuthClick} target={target}>
                <Button
                    className="google"
                    iconBefore={<img src={google_icon} className="google-icon" alt="Google" />}>
                        <span>Login with Google</span>
                </Button>
            </a>

            {/* Steam */}
            {/* <a href={steam_endpoint} target={target} style={{cursor: "default", pointerEvents: "none"}}>
                <Button
                    className="steam"
                    iconBefore={<img src={steam_icon} className="steam-icon" alt="Steam" />}>
                        <span>Login with Steam</span>
                </Button>
            </a> */}

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

export default SocialForm
