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

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

const CoverUpload: React.FC<Props> = ({
  photo,
  onUploadSuccess,
  onRemove,
  hideUpdate,
  replace,
}) => {
  return (
    <React.Fragment>
      <Row gutter={[24, 0]}>
        <Col>
          <ImageUpload
            className="data-capture-form-container__cover"
            photo={photo}
            onUploadSuccess={onUploadSuccess}
            onRemove={onRemove}
            dropAspect={564 / 564}
            hideUpdate={hideUpdate}
            content={
              <div>
                <div className="height--32">
                  <Icon name="add-blue" />
                </div>
                <Paragraph className="m__t--4" preset="semibold16">
                  Add Image
                </Paragraph>
                <Paragraph
                  preset="regular14"
                  className="text-grey4 leading-22 p__x--14 m__t--4"
                >
                  Use a size that’s at least 564x564 pixels and 6MB or less.
                </Paragraph>
              </div>
            }
          />
        </Col>
        {replace && (
          <Col>
            <ImageUpload
              className="data-capture-form-container__cover"
              photo={{ ...photo, url: "" }}
              onUploadSuccess={onUploadSuccess}
              onRemove={onRemove}
              dropAspect={564 / 564}
              hideUpdate={hideUpdate}
              replace
              content={
                <div>
                  <div className="height--32">
                    <Icon name="add-blue" />
                  </div>
                  <Paragraph className="m__t--4" preset="semibold16">
                    Replace Image
                  </Paragraph>
                  <Paragraph
                    preset="regular14"
                    className="text-grey4 leading-22 p__x--14 m__t--4"
                  >
                    Use a size that’s at least 564x564 pixels and 6MB or less.
                  </Paragraph>
                </div>
              }
            />
          </Col>
        )}
      </Row>
    </React.Fragment>
  );
};

export default CoverUpload;
