import React from 'react'
import { get } from 'lodash'
import styled from 'styled-components'
import { H2, Button } from '@pubsweet/ui'
import { th } from '@pubsweet/ui-toolkit'
import { compose, setDisplayName, withProps } from 'recompose'
import { Item } from 'pubsweet-component-faraday-ui'

const AppBar = ({
  logo: Logo,
  menu: Menu,
  createDraft,
  canCreateDraft,
  currentUser = {},
  fixed = true,
  isSubmit,
  autosave: Autosave,
  journal: { metadata: { backgroundImage, nameText } },
}) => (
  <Root fixed={fixed}>
    {backgroundImage && <JournalBackground img={backgroundImage} />}
    <LogoContainer>
      <Logo />
    </LogoContainer>
    <RightContainer>
      <Item mr={2}>
        <Autosave />
      </Item>
      {createDraft &&
        !isSubmit &&
        currentUser.user && (
          <Button
            data-test="new-manuscript"
            disabled={!canCreateDraft}
            ml={2}
            mr={5}
            onClick={createDraft}
            primary
            size="small"
          >
            SUBMIT
          </Button>
        )}
      <Menu />
    </RightContainer>
  </Root>
)

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

export default compose(
  withProps(({ location = {}, submitPath = '/submit' }) => ({
    isSubmit: get(location, 'pathname', '').includes(submitPath),
  })),
  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: ${th('appBar.zIndex')};

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