import React from 'react'
import styled from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'
import { FilePicker } from '@pubsweet/ui'
import { compose, withStateHandlers, withProps } from 'recompose'

import { radiusHelpers } from './styledHelpers'
import { withNativeFileDrop, withFileSectionDrop } from './helpers'
import {
  Row,
  Item,
  Text,
  Label,
  FileItem,
  ActionLink,
  DragHandle,
  SortableList,
} from './'

const EXTENSIONS = {
  pdf: 'PDF',
  doc: 'Doc',
  docx: 'DocX',
  png: 'PNG',
}

const FileSection = ({
  error,
  title,
  isLast,
  listId,
  isFirst,
  required,
  moveItem,
  isFileItemOver,
  canDropFileItem,
  connectFileDrop,
  supportedFormats,
  connectDropTarget,
  allowedFileExtensions,
  files = [],
  onFilePick = () => {},
  onPreview,
  onDownload,
  onDelete,
}) => (
  <Root
    innerRef={instance => {
      connectFileDrop(instance)
      connectDropTarget(instance)
    }}
    isFileItemOver={isFileItemOver && canDropFileItem}
    isFirst={isFirst}
    isLast={isLast}
  >
    {error}
    <Row alignItems="center">
      <Item>
        <Label required={required}>{title}</Label>
        <FilePicker
          allowedFileExtensions={allowedFileExtensions}
          onUpload={onFilePick}
        >
          <ActionLink icon="plus" size="small">
            UPLOAD FILE
          </ActionLink>
        </FilePicker>
      </Item>
      {supportedFormats && (
        <Item justify="flex-end">
          <Text fontStyle="italic" secondary>
            Supported file formats: {supportedFormats}
          </Text>
        </Item>
      )}
    </Row>
    <SortableList
      beginDragProps={['id', 'index', 'name', 'listId']}
      dragHandle={DragHandle}
      items={files}
      listId={listId}
      listItem={FileItem}
      mb={1}
      moveItem={moveItem}
      onDelete={onDelete}
      onDownload={onDownload}
      onPreview={onPreview}
    />
  </Root>
)

export default compose(
  withStateHandlers(
    { error: '' },
    {
      setError: () => error => ({
        error,
      }),
    },
  ),
  withProps(({ allowedFileExtensions = [] }) => ({
    supportedFormats: allowedFileExtensions
      .map(ext => EXTENSIONS[ext.toLowerCase()])
      .join(', '),
  })),
  withFileSectionDrop,
  withNativeFileDrop,
)(FileSection)

// #region styles
const Root = styled.div`
  background: ${props =>
    props.isFileItemOver ? th('colorFurniture') : th('colorBackground')};
  min-height: calc(${th('gridUnit')} * 22);
  padding: 0 ${th('gridUnit')};

  ${radiusHelpers};
  border-bottom: ${props => (!props.isLast ? '1px dashed #dbdbdb' : 'none')};
`
// #endregion