import React from 'react'
import { get } from 'lodash'
import { Field } from 'redux-form'
import { Icon } from '@pubsweet/ui'
import styled from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'

import { ContextualBox, Row, Text, WizardFiles } from '../'

const Empty = () => <div />

const ManuscriptFiles = ({
  token,
  fragment,
  formName,
  collection,
  changeForm,
  deleteFile,
  uploadFile,
  filesError,
  previewFile,
  getSignedUrl,
}) => (
  <ContextualBox label="Manuscript Files" startExpanded transparent>
    <Root>
      <Row justify="flex-start" mb={2}>
        <Text secondary>
          Drag & drop files in the specific section or click{' '}
          <CustomIcon secondary size={2}>
            plus
          </CustomIcon>{' '}
          to upload. Use the{' '}
          <CustomIcon secondary size={2}>
            menu
          </CustomIcon>{' '}
          icon to reorder or move files to a different type.
        </Text>
      </Row>
      <Field component={Empty} name="files" />
      <WizardFiles
        changeForm={changeForm}
        collection={collection}
        deleteFile={deleteFile}
        files={get(fragment, 'revision.files', {})}
        formName={formName}
        fragment={fragment}
        getSignedUrl={getSignedUrl}
        previewFile={previewFile}
        token={token}
        uploadFile={uploadFile}
      />
      {filesError && (
        <Row justify="flex-start" mt={1}>
          <Text error>{filesError}</Text>
        </Row>
      )}
    </Root>
  </ContextualBox>
)

export default ManuscriptFiles

// #region styled-components
const Root = styled.div`
  border-left: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
  padding-left: calc(${th('gridUnit')} * 1);
`

const CustomIcon = styled(Icon)`
  vertical-align: sub;
`
// #endregion