import React, { Component } from 'react'
//import "./AdminUI.sass"
import { Link, NavLink } from 'react-router-dom'
import styled, { createGlobalStyle, withTheme } from 'styled-components';
import {SearchBox}  from '../components';


export class AdminUI extends Component {
    render() {
        const GlobalStyle = createGlobalStyle`
            *{
                box-sizing: border-box;
            }
            html, body{
                margin: 0;
            }
            #root{
                min-height: 100vh;
                display: grid;
                grid-template-columns: auto 1fr auto;
                grid-template-rows: auto 1fr 2em;
                grid-template-areas: "header header header" " menu main ." "footer footer footer";
                //background: $color2
                overflow: auto;
            }
            `;
        const Header = styled.header`
            position: relative;
            -ms-grid-row: 1;
            -ms-grid-column: 1;
            -ms-grid-column-span: 3;
            grid-area: header;
            display: -webkit-inline-box;
            display: -ms-inline-flexbox;
            display: inline-flex;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
                -ms-flex-direction: row;
                    flex-direction: row;
            min-height: auto;
            padding: .5em;
            -webkit-box-pack: end;
                -ms-flex-pack: end;
                    justify-content: flex-end;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            background: ${this.props.theme.colours.color1};
            color: ${this.props.theme.colours.color7};
            h1 {
            -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
            white-space: nowrap;
            display: -webkit-inline-box;
            display: -ms-inline-flexbox;
            display: inline-flex;
            font-size: 1.5em;
            }

            &::after {
            -ms-grid-column-align: start;
            justify-self: start;
            position: absolute;
            display: block;
            content: '';
            left: 0;
            right: 0;
            top: 100%;
            background: ${this.props.theme.colours.color3};
            height: .2em;
            z-index: 1;
            }
            nav{
                display: inline-flex;
                flex-wrap: nowrap;
                flex-shrink: 1;
                ul{
                    list-style: none;
                    padding: 0;
                    li{
                        display: inline;
                        a{
                            text-decoration: none;
                            color: ${this.props.theme.colours.color6};
                            padding: .5em;
                            white-space: nowrap;
                            &:hover{
                                color: ${this.props.theme.colours.color3};
                            }
                        }
                    }
                }
            }
        `;
        const Menu = styled.menu`
            -ms-grid-row: 2;
            -ms-grid-column: 1;
            grid-area: menu;
            margin: 0;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            min-height: 100;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            background: ${this.props.theme.colours.color1};
            padding: .5em 0;
            overflow: visible;
            h3{
                margin: 0;
                color: #ddd9ebbf;
                -webkit-text-decoration: bold;
                text-decoration: bold;
            }
            ul{
                list-style: none;
                padding-left: 0;
                margin: .4em 0;
                a{
                    position: relative;
                    display: block;
                    text-decoration: none;
                    margin-left: .4em;
                    color: ${this.props.theme.colours.color6};
                    padding: .3em .5em;
                    font-size: 1.05em;
                    -webkit-transition: ease all 500ms;
                    transition: ease all 500ms;
                    &::after{
                        -webkit-transition: ease all 500ms;
                        transition: ease all 500ms;
                        position: absolute;
                        top: 0;
                        bottom: 0;
                        right: 100%;
                        width: 0em;
                        content: '';
                        background: ${this.props.theme.colours.color6};
                    }
                    &:hover{
                        background: ${this.props.theme.colours.color3};
                        &::after{
                            width: 0.4em;
                        }
                    }
                    &.menu__active{
                        color: ${this.props.theme.colours.color3};
                        &::after{
                            width: 0.4em;
                            background: ${this.props.theme.colours.color2};
                        }
                        &:hover {
                            color: ${this.props.theme.colours.color10};
                            &::after {
                            width: 0.4em;
                            background: ${this.props.theme.colours.color6};
                            }
                        }
                    }
                }
            }
  `;
        const Footer = styled.footer`
            position: relative;
            grid-area: footer;
            display: flex;
            justify-content: center;
            align-items: center;
            color: ${this.props.theme.colours.color10};
            text-shadow:  0 0 .3em ${this.props.theme.colours.color2};
            text-transform: uppercase;
            background: ${this.props.theme.colours.color2};
            &::after {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                height: 2em;
                opacity: 0.5;
                background: linear-gradient(-10deg, ${this.props.theme.colours.color2} 0%, ${this.props.theme.colours.color9}, ${this.props.theme.colours.color6} 50%, ${this.props.theme.colours.color4} 65%, ${this.props.theme.colours.color1} 100%);
                content: '';
            }
            &::before {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 100%;
                height: .2em;
                opacity: 0.5;
                content: '';
                background: linear-gradient(${this.props.theme.colours.color2}, ${this.props.theme.colours.color3});
            }
        `;
        const Main = styled.div`
            position: relative;
            grid-area: main;
            display: flex;
            align-content: flex-start;
            align-items: flex-start;
            flex-wrap: wrap;
            padding: 1em;
            background: ${this.props.theme.colours.color2};
        `;
        return (
            <>
                <GlobalStyle />
                <Header>
                    <h1>Doorlock Systems</h1>
                    <SearchBox />
                    <nav>
                        <ul>
                            <li><Link to="/user_cp">User Settings</Link></li>
                            <li><Link to="/logout">Logout</Link></li>
                        </ul>
                    </nav>
                </Header>
                <Menu>
                    <h3>Menu{props => this.props.theme}</h3>
                    <ul>
                        <li><NavLink activeClassName="menu__active" exact to="/">Status</NavLink></li>
                        <li><NavLink activeClassName="menu__active" to="/accounts">Account</NavLink></li>
                        <li><NavLink activeClassName="menu__active" to="/log">Log</NavLink></li>
                        <li><NavLink activeClassName="menu__active" to="/backup">Backup</NavLink></li>
                        <li><NavLink activeClassName="menu__active" to="/admin">Admin</NavLink></li>
                    </ul>
                </Menu>
                <Main>
                    {this.props.children}
                </Main>
                <Footer>Footer</Footer>
            </>
        )
    }
}

export default withTheme(AdminUI)