import React from 'react';
import ReactDOM from 'react-dom';
import styled from 'styled-components';
import Menu from '../Menu/menu.jsx';
import Avatar from '../Avatar/avatar.jsx';
import Logo from '../../Atoms/Logo/logo.jsx';
import { WClearfix, Flex, Image } from '../../commonResources/commonStyle.jsx';
import { Colors } from '../../commonResources/colorVariables.jsx';


 const TopNav = styled.div`
    z-index: 2007;
    display: flex;
    min-height: 50px;
    -webkit-box-pack: justify;
    -webkit-box-align: center;
    align-items: center;
    background-color: ${Colors.defaultDark};
    color: ${Colors.middleGrey};
    font-size: 14px;
    font-weight: 700;
    align-self: center;
`;

 const WNav = styled.div`
    position: relative;
    z-index: 1000;
    &:before :after {
      content: " ";
      display: table;
    }
      &:after {
      clear: both;
    }
`;

 const MastHeadNav = styled(TopNav, WNav,)`
    margin: 0;
    min-height: 100%;
    font-family: Lato, sans-serif;
    font-size: 14px;
    line-height: 1.4em;
    color: ${Colors.darkerGrey};
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
`;

 const Center = styled.div`
    display: flex;
    align-self: center;
`;

 const MastHeadCenter = styled(Center,Flex)`
    -webkit-box-align: center;
    align-items: center;
`;

 const MastHeadText = styled.div`
    margin-right: 0.75rem;
    color: ${Colors.middleGrey};
    font-size: 13px;
    font-weight: 400;
`;

export class Masthead extends React.Component {

  constructor( props ) {
    super( props );
  }

  render() {
    return (
    <MastHeadNav>
      <Menu menuItemNames={ this.props.menuItemNames } menuClick={ this.props.menuClick } />
      <Logo logo={ this.props.logo } logoRedirect={ this.props.logoRedirect } />
      <MastHeadCenter>
        <MastHeadText>
          { this.props.text }
        </MastHeadText>
        <Avatar {...this.props}/>
      </MastHeadCenter>
    </MastHeadNav>
    )
  }
}

export default Masthead;