import React, { Fragment } from 'react'
import { isEmpty } from 'lodash'
import styled from 'styled-components'
import {
  Text,
  ManuscriptHeader,
  ManuscriptDetailsTop,
  ManuscriptMetadata,
} from 'pubsweet-component-faraday-ui'

const ManuscriptLayout = ({
  history,
  getSignedUrl,
  currentUser,
  editorInChief,
  canMakeRevision,
  hasResponseToReviewers,
  editorialRecommendations,
  journal = {},
  collection = {},
  fragment = {},
  permissions,
}) => (
  <Root>
    {!isEmpty(collection) && !isEmpty(fragment) ? (
      <Fragment>
        <ManuscriptDetailsTop
          collection={collection}
          currentUser={currentUser}
          fragment={fragment}
          getSignedUrl={getSignedUrl}
          history={history}
          {...permissions}
        />
        <ManuscriptHeader
          collection={collection}
          editorInChief={editorInChief}
          fragment={fragment}
          journal={journal}
        />
        <ManuscriptMetadata
          currentUser={currentUser}
          fragment={fragment}
          getSignedUrl={getSignedUrl}
        />
      </Fragment>
    ) : (
      <Text>Loading...</Text>
    )}
  </Root>
)

export default ManuscriptLayout

// #region styles
const Root = styled.div`
  overflow-y: auto;
  min-height: 50vh;
`
// #endregion