import React, { Fragment } from 'react'
import { get } from 'lodash'
import { Field } from 'redux-form'
import { H2, Icon } from '@pubsweet/ui'
import { Row, Text, WizardFiles } from 'pubsweet-component-faraday-ui'

import { Empty } from './'

const StepThree = ({
  token,
  version,
  project,
  changeForm,
  deleteFile,
  uploadFile,
  filesError,
  getSignedUrl,
}) => (
  <Fragment>
    <CustomH2>3. Manuscript Files Upload</CustomH2>
    <Row mb={2}>
      <Text align="center" display="flex" secondary>
        Drag & drop files in the specific section or click{' '}
        <Icon secondary size={2}>
          plus
        </Icon>{' '}
        to upload. Use the{' '}
        <Icon secondary size={2}>
          menu
        </Icon>{' '}
        icon to reorder or move files to a different type.
      </Text>
    </Row>

    <Field component={Empty} name="files" />
    <WizardFiles
      changeForm={changeForm}
      deleteFile={deleteFile}
      files={get(version, 'files', {})}
      getSignedUrl={getSignedUrl}
      project={project}
      token={token}
      uploadFile={uploadFile}
      version={version}
    />
    {filesError && (
      <Row mt={1}>
        <Text error>{filesError}</Text>
      </Row>
    )}
  </Fragment>
)

export default StepThree

// #region styles
const CustomH2 = H2.extend`
  margin: 0;
`
// #endregion