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

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

const CoverUpload: React.FC<Props> = ({ photo, onUploadSuccess, onRemove }) => {
  return (
    <React.Fragment>
      <Row align="middle" justify="center">
        <Col>
          <ImageUpload
            className="fan-club-card__cover"
            photo={photo}
            onUploadSuccess={onUploadSuccess}
            onRemove={onRemove}
            dropAspect={200 / 200}
            hideRemove={true}
          >
            <Icon name="add-blue" />
            <Paragraph preset="regular14" className="text--grey4 width--136">
              Use a size that’s at least 369 x 369 pixels and 6MB or less
            </Paragraph>
          </ImageUpload>
        </Col>
        {photo?.url ? (
          <Button
            type="text"
            onClick={onRemove}
            className="btn-delete btn--circle p__x--0 p__y--0"
          >
            <Icon width={24} height={24} name="close-black" />
          </Button>
        ) : null}
      </Row>
      {!photo?.url && (
        <Paragraph
          className="text--red text__align--center m__t--8"
          preset="regular12"
        >
          Please upload an image
        </Paragraph>
      )}
    </React.Fragment>
  )
}

export default CoverUpload
