import React from 'react'

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

/* Views & Components */
import LoginForm from './auth-login'
import RegistrationForm from './auth-register'
import SocialForm from './auth-social'
import ForgotForm from './auth-forgot'

/* Models */
// import { useStores } from '../../../models/RootStoreContext'

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

const Auth = (props) => {
    /* States */
    const [authUIState, setAuthUIState] = React.useState("login")

    /* Capture incoming token & info */
    const url_params = new URLSearchParams(window.location.search)
    
    /* If token exists, auth & redirect */
    if(url_params.has('token')){
        // Send token to /user/authenticated event path
        const incoming_token = url_params.get('token')

        let id = ""
        if(url_params.has('id')){
            id = url_params.get('id')
        }

        setTimeout(() => {
            // Electron event
            global.dispatchEvent(new CustomEvent('/user/authenticated', { bubbles: true, detail: { token: incoming_token, id: id } }))

            // Needed redundancy (for now) to enable web & electron
            window.dispatchEvent(new CustomEvent('/user/authenticated', { bubbles: true, detail: { token: incoming_token, id: id } }))
            console.log("DISPATCHED EVENT token:", incoming_token)
        }, 500)
        
        
        // Remove params
        const url = new URL(window.location.href)
        const params = new URLSearchParams(url.search.slice(1))
        params.delete('token')
        params.delete('source')

        window.history.replaceState(
            {},
            '',
            `${window.location.pathname}`,
        )

    }

    return (
        <Pane className={`chroma-auth ${authUIState}`}>
            <Pane className={`form social`} flex={5} padding={24}>
                <SocialForm user_hash={props.user_hash} source={props.source}  />
            </Pane>

            <Pane className={`form divider`}>
                <Pane className="left" />
                <Text className="text">OR</Text>
                <Pane className="right" />
            </Pane>

            <Pane className="clear" />

            <Pane className={`form login`} flex={5}>
                {/* <h3 className="title">Login</h3> */}
                {/* <LoginForm callback={props.config.login_callback} /> */}
                <LoginForm />
            </Pane>

            <Pane className={`form register`} flex={5}>
                {/* <h3 className="title">Register</h3> */}
                {/* <RegistrationForm callback={props.config.registration_callback} /> */}
                <RegistrationForm />
            </Pane>

            <Pane className={`form forgot`} flex={5}>
                {/* <h3 className="title">Authentication Issues</h3> */}
                <ForgotForm />
            </Pane>

            <Pane className={`form toggles`} flex={5}>
                {/* Login */}
                <Button className="login" onClick={() => setAuthUIState("login")}>Login</Button>

                {/* Register */}
                <Button className="register" onClick={() => setAuthUIState("register")}>Register</Button>

                {/* Register */}
                <Text className="forgot" onClick={() => setAuthUIState("forgot")}>Forgot Password?</Text>

                <Pane className="clear" />
            </Pane>
        </Pane>
    );
}

export default Auth
