import React from 'react'
import { Button, Row, Col } from 'antd'
import { Paragraph, Text } from 'components/Typography'
import Highlight from 'components/@atoms/Highlight'
import { ModalStep } from 'redux/Shopify/types'
import { Icon } from 'components/Icon'
import { ReactComponent as PurchaseIcon } from 'icons/purchase.svg'
import { propsSignPostIcons } from 'styles'

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

const login = ({ callback, createAccount }: IProps): ModalStep => ({
  title: 'Connect Shopify',
  content: (
    <>
      <Row>
        <Text preset="regular16" className="m__b--16 leading-24">
          {`To add your products through Shopify, you need to connect Shopify
        store first. If you have multiple stores, you'll need to connect them
        invidually.`}
        </Text>
      </Row>
      <Highlight>
        <Paragraph>
          <Row className="height--36">
            <b>If You Connect Your Shopify Account:</b>
          </Row>
          <Row gutter={16} align="middle">
            <Col className="height--36">
              <Icon name="shop" {...propsSignPostIcons} />
            </Col>
            <Col className="height--28">
              <Paragraph>{`You'll be sharing product and collection details with Komi.`}</Paragraph>
            </Col>
          </Row>
          <Row gutter={16} align="middle">
            <Col className="height--36">
              <PurchaseIcon {...propsSignPostIcons} />
            </Col>
            <Col className="height--28">
              <Paragraph>{`Transactions will occur though your Shopify store`}</Paragraph>
            </Col>
          </Row>
          <Row gutter={16} align="middle">
            <Col className="height--36">
              <Icon name="analytic" {...propsSignPostIcons} />
            </Col>
            <Col className="height--28">
              <Paragraph>{`You will be able to access transaction analytics on your Komi analytics dashboard.`}</Paragraph>
            </Col>
          </Row>
        </Paragraph>
      </Highlight>
    </>
  ),
  footer: (
    <>
      <Row>
        <Button
          type="primary"
          block
          onClick={callback}
          size="large"
          className="text__transform--uppercase letter__spacing--1"
        >
          Connect Shopify Account
        </Button>
      </Row>
      <Row className="m__t--16">
        <Button
          size="large"
          block
          onClick={createAccount}
          className="text__transform--uppercase letter__spacing--1"
        >
          I don’t have a shopify account
        </Button>
      </Row>
    </>
  )
})

export default login
