import React from 'react'
import styled from 'react-emotion'
import { FaArrowRight, FaExclamationTriangle } from 'react-icons/fa'

import Authentication from './authentication'
import Button from './button'
import LoginLinks from './login-links'
import Img from "gatsby-image"
import { graphql } from 'gatsby'

export const query = graphql`
  query {
    file(relativePath: { eq: "images/logo-big.png" }) {
      childImageSharp {
        # Specify the image processing specifications right in the query.
        # Makes it trivial to update as your page's design changes.
        fixed(width: 125, height: 125) {
          ...GatsbyImageSharpFixed
        }
      }
    }
  }
`


const GUEST_PASS = 'kYcHtjkAFeml&48clhP#A!K9vKl%Nc5309IFgB2eqJk!JO6'

const Container = styled.div(
    {
        display: `flex`,
        justifyContent: 'center',
        flex: 1,
        minHeight: '100%',
        flexDirection: 'column',
        padding: '1rem',
    },
    ({ theme }) => ({
        color: theme.color,
    })
)

const Title = styled.h1({
    fontSize: 28,
    fontWeight: 400,
    textAlign: 'left',
})

const Subtitle = styled.span(
    {
        display: 'block',
        fontSize: 40,
        fontWeight: 700,
    },
    ({ theme }) => ({
        color: theme.name === 'dark' ? '#3FA9F5' : theme.accent,
    })
)

const Message = styled.h4(
    {
        fontSize: 14,
        margin: '0.5rem 0',
    },
    ({ theme }) => ({
        color: theme.alert,
    })
)

let username
let password

function Login() {
    const userInput = (
        <input
            name="username"
            onChange={event => {
                username = event.target.value
            }}
        />
    )
    const passInput = (
        <input
            name="password"
            type="password"
            onChange={event => {
                password = event.target.value
            }}
        />
    )
    return (
        <Container>
            <Authentication>
                {({ authenticated, login, loginOffline, register, error }) => {
                    if (authenticated) {
                        return null
                    }
                    return (
                        <>
                            <Title>
                                Welcome to
                                <Subtitle>Spark2Date</Subtitle>
                            </Title>
                            <Img fixed={data.file.childImageSharp.fixed} />
                            <label>
                                Username:
                                {userInput}
                            </label>
                            <label>
                                Password:
                                {passInput}
                            </label>
                            <Button
                                css={{ margin: '1rem 0' }}
                                onClick={() => {
                                    // TODO: fix login as guest when server can be hosted on cloud
                                    if (document.URL.includes('localhost:8000'))
                                        login(`guest_${Math.random()}`, GUEST_PASS)
                                    else loginOffline()
                                }}
                            >
                                Log in as Guest{' '}
                                <FaArrowRight css={{ position: 'relative', top: 4 }} />
                            </Button>
                            <Button
                                css={{ margin: '1rem 0' }}
                                onClick={() => {
                                    login(username, password)
                                }}
                            >
                                Log in <FaArrowRight css={{ position: 'relative', top: 4 }} />
                            </Button>
                            <Button
                                css={{ margin: '1rem 0' }}
                                onClick={() => {
                                    register(username, password)
                                }}
                            >
                                Register
                                <FaArrowRight css={{ position: 'relative', top: 4 }} />
                            </Button>
                            {error && (
                                <Message>
                                    <FaExclamationTriangle
                                        css={{
                                            position: 'relative',
                                            top: 2,
                                            marginRight: '0.25rem',
                                        }}
                                    />
                                    <p>{error}</p>
                                </Message>
                            )}
                        </>
                    )
                }}
            </Authentication>
            <LoginLinks />
        </Container>
    )
}

export default Login