import React from "react";
import { Button, Col, Row } from "antd";
import { Icon } from "components/Icon";
import { Text } from "components/Typography";
import { RyeModalStep } from "redux/RyeShopify/types";

export interface IProps {
  isReloading: boolean;
  close: () => void;
  reload: () => void;
}

const empty = ({ isReloading, close, reload }: IProps): RyeModalStep => ({
  title: "Select Product Type",
  content: (
    <>
      <Row gutter={[10, 10]} className="p__y--24">
        <Col span={24} className="text__align--center">
          <Icon name="shopify-no-product" />
        </Col>
        <Col span={24} className="text__align--center">
          <Text preset="semibold18" className="d--block m__b--4">
            No Products Found
          </Text>
          <Text>
            You have no products in your Shopify Store. To add products to your
            Komi profile, you need to add them to your Shopify store first. You
            can click reload once your products are added to refresh this page.
          </Text>
        </Col>
      </Row>
    </>
  ),
  footer: (
    <Row justify="end" gutter={[16, 16]}>
      <Col>
        <Button
          size="large"
          block
          onClick={close}
          className="text__transform--uppercase letter__spacing--1"
        >
          Close
        </Button>
      </Col>
      <Col>
        <Button
          className="text__transform--uppercase letter__spacing--1"
          loading={isReloading}
          type="primary"
          block
          onClick={reload}
          size="large"
        >
          Reload
        </Button>
      </Col>
    </Row>
  ),
});

export default empty;
