import React from 'react'
import { get } from 'lodash'
import styled from 'styled-components'
import { H1, Button } from '@pubsweet/ui'
import { withJournal } from 'xpub-journal'
import { Text, Row } from 'pubsweet-component-faraday-ui'

const SubmissionConfirmation = ({ history, journal }) => (
  <Root>
    <H1>Thank You for Submitting Your Manuscript</H1>
    <Text secondary>
      Your manuscript has been successfully submitted to{' '}
      <b>{get(journal, 'metadata.nameText', '')}</b>.
    </Text>

    <Row mb={2} mt={2}>
      <Text align="center">
        An acknowledgment email will be sent to all authors when our system has
        finished processing the submission - at which point a manuscript ID will
        be assigned, and you will be able to track the manuscript status on your
        dashboard.
      </Text>
    </Row>
    <Button onClick={() => history.push('/')} primary>
      GO TO DASHBOARD
    </Button>
  </Root>
)

export default withJournal(SubmissionConfirmation)

// #region styles
const Root = styled.div`
  align-items: center;
  display: flex;
  flex-direction: column;
`
// #endregion