import React from 'react'
import { Button, Row, Col } from 'antd'
import { Paragraph, Text } from 'components/Typography'
import { RyeModalStep } from 'redux/RyeShopify/types'
import Highlight from 'components/@atoms/Highlight'
import { Icon } from 'components/Icon'
import { propsSignPostIcons } from 'styles'

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

const createAccount = ({ callback, back }: IProps): RyeModalStep => ({
  title: 'Create a Shopify Account',
  content: (
    <>
      <Row>
        <Text preset="regular16" className="m__b--16 leading-24">
          {`To start adding products from Shopify store, you need to create a Shopify account first. If you don't already have one.`}
        </Text>
      </Row>
      <Highlight>
        <Paragraph>
          <Row className="height--36">
            <b>To Create a Shopify Account, All You Need is:</b>
          </Row>
          <Row gutter={16} align="middle">
            <Col className="height--36">
              <Icon name="capture-email" {...propsSignPostIcons} />
            </Col>
            <Col className="height--28">
              <Paragraph>{`Your email address`}</Paragraph>
            </Col>
          </Row>
          <Row gutter={16} align="middle">
            <Col className="height--36">
              <Icon name="shop" {...propsSignPostIcons} />
            </Col>
            <Col className="height--28">
              <Paragraph>{`Your store name`}</Paragraph>
            </Col>
          </Row>
        </Paragraph>
      </Highlight>
    </>
  ),
  footer: (
    <>
      <Row justify="end">
        <Button
          onClick={back}
          size="large"
          className="text__transform--uppercase letter__spacing--1"
        >
          PREVIOUS
        </Button>
        <Button type="primary" size="large" onClick={callback}>
          SIGN UP TO SHOPIFY
        </Button>
      </Row>
    </>
  )
})

export default createAccount
