// @flow
/**
 * Part of GDL gdl-frontend.
 * Copyright (C) 2017 GDL
 *
 * See LICENSE
 */

import * as React from 'react';
import styled from 'react-emotion';
import { AppBar, Toolbar, IconButton, Tooltip } from '@material-ui/core';
import MenuIcon from '@material-ui/icons/Menu';
import SearchIcon from '@material-ui/icons/Search';
import LanguageIcon from '@material-ui/icons/Language';
import { Trans } from '@lingui/react';
import SelectLanguage from '../LanguageMenu/SelectLanguage';

import { Link } from '../../routes';
import SrOnly from '../../components/SrOnly';
import GlobalDigitalLibraryLogo from './beta-logo.svg';
import media from '../../style/media';

type Props = {
  onMenuClick(): void
};

// The tiny bit of padding here prevents the 'A' in 'Beta' from getting smooshed
const BrandLink = styled('a')`
  svg {
    margin-top: 2px;
    padding-right: 2px;
    height: 36px;
    width: 100px;
    ${media.tablet`
      width: auto;
    `};
  }
`;

const Navbar = ({ onMenuClick }: Props) => {
  const brandLink = (
    <Link route="books" passHref>
      <BrandLink aria-label="Global Digital Library">
        <GlobalDigitalLibraryLogo aria-hidden />
      </BrandLink>
    </Link>
  );

  return (
    <AppBar position="static">
      <Toolbar>
        <IconButton
          color="inherit"
          onClick={onMenuClick}
          css={{ marginRight: 18 }}
        >
          <MenuIcon />
          <SrOnly>
            <Trans>Open menu</Trans>
          </SrOnly>
        </IconButton>
        {brandLink}
        <Link route="search" passHref>
          <IconButton
            color="inherit"
            component="a"
            css={{ marginLeft: 'auto' }}
          >
            <SearchIcon />
            <SrOnly>
              <Trans>Search</Trans>
            </SrOnly>
          </IconButton>
        </Link>
        <SelectLanguage anchor="right">
          {({ onClick }) => (
            <Tooltip title={<Trans>Choose book language</Trans>}>
              <IconButton onClick={onClick} color="inherit">
                <LanguageIcon />
                <SrOnly>
                  <Trans>Choose book language</Trans>
                </SrOnly>
              </IconButton>
            </Tooltip>
          )}
        </SelectLanguage>
      </Toolbar>
    </AppBar>
  );
};

export default Navbar;

@@ -378,24 +378,72 @@
 /Language';%0A
+import HomeIcon from '@material-ui/icons/Home';%0A
 import %7B Tra
@@ -1596,14 +1596,13 @@
 te=%22
-search
+books
 %22 pa
@@ -1722,24 +1722,24 @@
 : 'auto' %7D%7D%0A
-
           %3E%0A
@@ -1730,32 +1730,266 @@
  %7D%7D%0A          %3E%0A
+            %3CHomeIcon /%3E%0A            %3CSrOnly%3E%0A              %3CTrans%3EHome%3C/Trans%3E%0A            %3C/SrOnly%3E%0A          %3C/IconButton%3E%0A        %3C/Link%3E%0A        %3CLink route=%22search%22 passHref%3E%0A          %3CIconButton color=%22inherit%22 component=%22a%22%3E%0A
             %3CSea

Add home icon to navbar