import { Col, Row } from 'antd/lib/grid'
import classNames from 'classnames'
import ImageUpload from 'components/ImageUpload'
import { Paragraph, Text } from 'components/Typography'
import React from 'react'
import { MediaUpload } from 'redux/Common/types'

interface Props {
  photo: MediaUpload
  onUploadSuccess: (file: MediaUpload) => void
  onRemove: (file: MediaUpload) => void
  error?: boolean
}

const CoverUpload: React.FC<Props> = ({
  photo,
  onUploadSuccess,
  onRemove,
  error
}) => {
  return (
    <React.Fragment>
      <Row align="middle" justify="center">
        <Col>
          <ImageUpload
            className={classNames(
              'product-editor__cover m__b--0',
              error && 'error'
            )}
            photo={photo}
            onUploadSuccess={onUploadSuccess}
            onRemove={onRemove}
            dropAspect={369 / 369}
          />
          {error && (
            <Paragraph className="text--red m__t--4" preset="regular12">
              Please upload cover art
            </Paragraph>
          )}
        </Col>
        <Col className="m__b--4 m__t--20" span={24}>
          <Text className="d--block text__align--center" preset="semibold18">
            Cover Art
          </Text>
        </Col>
        <Col span={24}>
          <Text
            className="d--block text__align--center text--grey4"
            preset="regular14"
          >
            Use a size that’s at least 369 x 369 pixels and 6MB or less
          </Text>
        </Col>
      </Row>
    </React.Fragment>
  )
}

export default CoverUpload
