import React from 'react'
import { Button, Row, Col } from 'antd'
import { Paragraph, Text, Title } from 'components/Typography'
import Highlight from 'components/@atoms/Highlight'
import { ModalStep } from 'redux/Shopify/types'
import { Icon } from 'components/Icon'
import { SHOPIFY_DOMAIN } from 'constants/shopify'
import './login.scss'
import { InlineMessage } from '@komi-app/components'

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

const login = ({ callback, cancel }: IProps): ModalStep => ({
  title: 'Connect Shopify',
  content: (
    <>
      <Row>
        <Text preset="regular16" className="m__b--16 leading-24">
          {`Connect your Shopify store to Komi in order to sell products directly
        from your profile. If you have multiple stores, you’ll need to connect
        each of them individually.`}
        </Text>
      </Row>
      <InlineMessage
        className="login-inline-message"
        message={
          <span>
            {`Don’t have a Shopify account? You’ll need to create one first in order
              to add products to your Komi profile.`}
            &nbsp;
            <a
              href={`${SHOPIFY_DOMAIN}/free-trial?ref=komi`}
              target="_blank"
              rel="noopener noreferrer"
            >
              Sign up for Shopify
            </a>
          </span>
        }
      />
      <Paragraph className="m__t--16">
        <Row className="height--36">
          <Title preset="bold18">How it works:</Title>
        </Row>
        <Row gutter={16} align="middle" className="m__b--14">
          <Col className="height--60">
            <Icon name="shopify" width={60} height={60} />
          </Col>
          <Col>
            <Title className="login-description-title" level={5}>
              1. Log in to Shopify
            </Title>
            <Paragraph className="login-description-text">{`Log in to your Shopify account so that we can connect your store.`}</Paragraph>
          </Col>
        </Row>
        <Row gutter={16} align="middle" className="m__b--14">
          <Col className="height--60">
            <Icon name="module-rye" />
          </Col>
          <Col>
            <Title className="login-description-title" level={5}>
              2. Connect to Rye
            </Title>
            <Paragraph className="login-description-text">{`Komi is powered by Rye to enable eCommerce services on our platform.`}</Paragraph>
          </Col>
        </Row>
        <Row gutter={16} align="middle">
          <Col className="height--60">
            <Icon name="module-komi" />
          </Col>
          <Col style={{ justifyContent: 'center' }}>
            <Title className="login-description-title" level={5}>
              3. Start Selling
            </Title>
            <Paragraph className="login-description-text">{`Select the products you want to add to your Komi page and start selling.`}</Paragraph>
          </Col>
        </Row>

        <Row className="m__t--24">
          <Paragraph className="commission-text">
            *Please note you will be charged a 5% commission on any purchases
            your audience make through your Komi page.
          </Paragraph>
        </Row>
      </Paragraph>
    </>
  ),
  footer: (
    <Row gutter={16} justify="end">
      <Col>
        <Button
          size="large"
          block
          onClick={cancel}
          className="text__transform--uppercase letter__spacing--1"
        >
          Cancel
        </Button>
      </Col>
      <Col>
        <Button
          type="primary"
          block
          onClick={callback}
          size="large"
          className="text__transform--uppercase letter__spacing--1"
        >
          Next
        </Button>
      </Col>
    </Row>
  )
})

export default login
