import React from "react";
import { Button, Col, Row } from "antd";
import { Paragraph, Text } from "components/Typography";
import { ModalStep } from "redux/Shopify/types";
import Highlight, { HIGHLIGHT_MODE } from "components/@atoms/Highlight";
import { Icon } from "components/Icon";

export interface IProps {
  callback?: () => void;
  back?: () => void;
}

export const title = "Your Shopify Store Has Been Connected";
export const content = (
  <>
    <Highlight mode={HIGHLIGHT_MODE.SUCCESS}>
      <Col className="height--24">
        <Icon name="success" width={24} height={24} />
      </Col>
      <Col className="m__l--12">
        <Paragraph preset="regular16">
          You have successfully connected your Shopify store.
        </Paragraph>
      </Col>
    </Highlight>
    <Row>
      <Text preset="regular16" className="leading-24">
        <ul className="m__l--18">
          <li className="m__t--16">
            You store module has been created. You can now add products or go
            back to your profile.
          </li>
          <li className="m__t--16">
            You can manage your connected stores and store names in Account
            Settings.
          </li>
          <li className="m__t--16">
            Komi will not be charging commission on any of your Shopify sales.
          </li>
        </ul>
      </Text>
    </Row>
  </>
);

const loginSuccess = ({ callback, back }: IProps): ModalStep => ({
  title,
  content,
  footer: (
    <>
      <Row>
        <Button
          type="primary"
          block
          onClick={callback}
          size="large"
          className="text__transform--uppercase letter__spacing--1"
        >
          START ADDING PRODUCTS
        </Button>
      </Row>
      <Row className="m__t--16">
        <Button size="large" block onClick={back}>
          GO BACK TO PROFILE
        </Button>
      </Row>
    </>
  ),
});

export default loginSuccess;
