import React, { Fragment, useState } from 'react';
import { Grid, AppBar, Button, Fab } from '@material-ui/core'
import { Link } from 'react-router-dom';
import * as ROUTES from '../../routes/route';
import { makeStyles } from '@material-ui/core/styles';
import HomeIcon from '@material-ui/icons/Home';

const cssStyles = makeStyles(theme => ({
    appbar: {
        paddingLeft: "20px",
    },
    fab: {
        background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
        borderRadius: 50,
        border: 0,
        color: 'white',
        height: 48,
        padding: '0 30px',
        boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    }

}));

function Header(props) {
   const [loginStatus, setLoginStatus] = useState(false);

    // ! TODO: Somehow figure out how to work with state here

    const useStyle = cssStyles();
    const LoggedOut = () => {
        return (
            <Fragment>
                <Grid item md={1} style={{ marginLeft: "auto" }}>
                    <Link to={ROUTES.LOGIN} style={{ textDecoration: "none" }}>
                        <Button className={useStyle.fab}>Login</Button>
                    </Link>
                </Grid>
                <Grid item md={1} style={{ marginLeft: "20px" }} >
                    <Link to={ROUTES.REGISTER} style={{ textDecoration: "none", color: "white" }}>
                        <Button color="inherit">Register</Button>
                    </Link>
                </Grid>
            </Fragment>
        )}

    const LoggedIn = ()=> {
        // TODO
    }

    return (
        <Fragment>
            <AppBar color="primary" position="static" className={useStyle.appbar}>
                <Grid
                    container
                    direction="row"
                    justify="flex-start"
                    alignItems="center"
                >
                    <Grid item md={1}>
                        <Link to={ROUTES.HOME}>
                            <img src={process.env.PUBLIC_URL + '/lines.ico'} width="50px" height="50px" />
                        </Link>
                    </Grid>
                        {(loginStatus=== true)? <LoggedIn/>: <LoggedOut/>}
                </Grid>
            </AppBar>
        </Fragment>
    )
}



export default Header;