import React from 'react'
import { th } from '@pubsweet/ui-toolkit'
import { H2 } from '@pubsweet/ui'
import styled from 'styled-components'
import { compose, setDisplayName } from 'recompose'

const AppBar = ({
  logo: Logo,
  menu: Menu,
  fixed = true,
  autosave: Autosave,
  journal: { backgroundImage, name },
}) => (
  <Root fixed={fixed}>
    {backgroundImage && <JournalBackground img={backgroundImage} />}
    <LogoContainer>
      <Logo />
    </LogoContainer>
    <H2>{name}</H2>
    <RightContainer>
      <Autosave />
      <Menu />
    </RightContainer>
  </Root>
)

AppBar.defaultProps = {
  autosave: () => <div />,
  logo: () => <div />,
  menu: () => <div />,
}

export default compose(setDisplayName('AppBar'))(AppBar)

// #region styles
const RightContainer = styled.div`
  align-items: center;
  display: flex;
  height ${th('appBar.height')};
  margin-right: ${th('gridUnit')};
  height: ${th('appBar.height')};

  position: absolute;
  right: 0;
  top: 0;
`

const LogoContainer = styled.div`
  align-items: center;
  display: flex;
  height ${th('appBar.height')};
  margin-left: ${th('gridUnit')};

  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
`

const JournalBackground = styled.div`
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: ${th('appBar.height')};

  background: ${props =>
    props.img
      ? `url(${props.img})
    center / 100% 60px no-repeat;`
      : th('appBar.colorBackground')};

  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.05),
    rgba(0, 0, 0, 0.2) 20%,
    rgba(0, 0, 0, 0.4) 50%,
    rgba(0, 0, 0, 0.2) 80%,
    rgba(0, 0, 0, 0.05)
  );
`

const Root = styled.div`
  align-items: center;
  background-color: ${th('appBar.colorBackground')};
  box-shadow: ${th('appBar.boxShadow')};
  height: ${th('appBar.height')};
  display: flex;
  justify-content: center;
  padding: 0 calc(${th('gridUnit')} * 2);
  position: ${props => (props.fixed ? 'fixed' : 'relative')};

  top: 0;
  left: 0;
  right: 0;

  z-index: ${Number.MAX_SAFE_INTEGER};

  ${H2} {
    z-index: 1;
  }
`
// #endregion