import React from 'react'
import { Button, Col, Row } from 'antd'
import { Paragraph, Title } from 'components/Typography'
import { RyeModalStep } from 'redux/RyeShopify/types'
import Highlight, { HIGHLIGHT_MODE } from 'components/@atoms/Highlight'
import { Icon, IconName } from 'components/Icon'
import './loginSuccess.scss'

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

const NextStep = ({
  title,
  icon,
  description
}: {
  title: string
  icon: IconName
  description: string
}) => {
  return (
    <div className="login-success__next-step-container">
      <div className="login-success__next-step-image-container">
        <div className="login-success__next-step-image-round-container">
          <Icon name={icon} width={24} height={24} />
        </div>
      </div>
      <div>
        <Title level={5}>{title}</Title>
        <Paragraph>{description}</Paragraph>
      </div>
    </div>
  )
}

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>
    <div className="login-success__steps-container">
      <Title level={4}>What’s Next:</Title>
      <NextStep
        icon="tee"
        title="Add Products"
        description="Your store module has been created. You can start adding products now or go back to Profile Builder."
      />
      <NextStep
        icon="redirect"
        title="Manage Your Connected Stores"
        description="You can manage your connected stores and store names in Profile Settings."
      />
    </div>
  </>
)

const loginSuccess = ({ callback, back }: IProps): RyeModalStep => ({
  title,
  content,
  footer: (
    <Row gutter={16}>
      <Col span={12}>
        <Button size="large" block onClick={back}>
          CLOSE
        </Button>
      </Col>
      <Col span={12}>
        <Button
          type="primary"
          block
          onClick={callback}
          size="large"
          className="text__transform--uppercase letter__spacing--1"
        >
          ADD PRODUCTS
        </Button>
      </Col>
    </Row>
  )
})

export default loginSuccess
