import React, { Fragment } from 'react'
import { isEmpty } from 'lodash'

import {
  Root,
  Header,
  SideBar,
  Container,
  LeftDetails,
  BreadCrumbs,
  ManuscriptId,
  RightDetails,
} from '../atoms'
import {
  SideBarRoles,
  SideBarActions,
  ManuscriptHeader,
  ReviewsAndReports,
  ManuscriptDetails,
  ManuscriptVersion,
  EditorialComments,
} from './'

const ManuscriptLayout = ({
  journal,
  history,
  currentUser,
  editorInChief,
  updateManuscript,
  canSeeEditorialComments,
  editorialRecommendations,
  project = {},
  version = {},
}) => (
  <Root>
    {!isEmpty(project) && !isEmpty(version) ? (
      <Fragment>
        <Container flex={3}>
          <Header>
            <LeftDetails>
              <BreadCrumbs>
                <span onClick={() => history.push('/')}>Dashboard</span>
                <span>Manuscript Details</span>
              </BreadCrumbs>
              <ManuscriptId>{`- ID ${project.customId}`}</ManuscriptId>
            </LeftDetails>
            <RightDetails>
              <ManuscriptVersion project={project} />
            </RightDetails>
          </Header>
          <ManuscriptHeader
            journal={journal}
            project={project}
            version={version}
          />
          <ManuscriptDetails collection={project} fragment={version} />
          <ReviewsAndReports project={project} version={version} />
          {canSeeEditorialComments &&
            editorialRecommendations.length > 0 && (
              <EditorialComments
                editorInChief={editorInChief}
                project={project}
                recommendations={editorialRecommendations}
              />
            )}
        </Container>
        <SideBar flex={1}>
          <SideBarActions project={project} version={version} />
          <SideBarRoles
            currentUser={currentUser}
            editorInChief={editorInChief}
            project={project}
            version={version}
          />
        </SideBar>
      </Fragment>
    ) : (
      <div>Loading...</div>
    )}
  </Root>
)

export default ManuscriptLayout