import React from 'react'
import { Button, Card, Col, Row } from 'antd'

import classNames from 'classnames'
import { Icon } from 'components/Icon'
import { Text } from 'components/Typography'

import { RyeModalStep, RYE_PRODUCT_TYPES } from 'redux/RyeShopify/types'

export interface IProps {
  productType?: RYE_PRODUCT_TYPES
  select?: (type: RYE_PRODUCT_TYPES) => void
  callback?: () => void
}

const selectModuleType = ({
  productType,
  select,
  callback
}: IProps): RyeModalStep => ({
  title: 'Select Product Type',
  content: (
    <>
      <Row>
        <Text preset="regular16" className="m__b--16 leading-24">
          You have two options when adding products to a module: product
          collection or individual products.
        </Text>
      </Row>
      <Row justify="space-between" gutter={[16, 16]}>
        <Col span={12}>
          <Card
            className={classNames('cursor-pointer', {
              selected: productType === RYE_PRODUCT_TYPES.COLLECTION
            })}
            onClick={() => select && select(RYE_PRODUCT_TYPES.COLLECTION)}
          >
            <Icon name="shopping-bags" />
            <Text
              preset="bold18"
              className="d--block m__t--12 leading-28 m__b--4"
            >
              Collection
            </Text>
            <Text className="leading-22 text--grey4" preset="regular14">
              Sync a product collection with multiple products. You can only add
              one collection per module.
            </Text>
          </Card>
        </Col>
        <Col span={12}>
          <Card
            className={classNames('cursor-pointer product-type-card', {
              selected: productType === RYE_PRODUCT_TYPES.INDIVIDUAL
            })}
            onClick={() => select && select(RYE_PRODUCT_TYPES.INDIVIDUAL)}
          >
            <Icon name="shopping-bag" />
            <Text
              preset="bold18"
              className="d--block m__t--12 leading-28 m__b--4"
            >
              Individual Products
            </Text>
            <Text className="leading-22 text--grey4" preset="regular14">
              You can sync individual products of your choice.
            </Text>
          </Card>
        </Col>
      </Row>
    </>
  ),
  footer: (
    <>
      <Row justify="end" align="middle">
        <Col>
          <Button
            className="height--52 width--160 text__transform--uppercase letter__spacing--1"
            type="primary"
            block
            onClick={callback}
            size="large"
          >
            Next
          </Button>
        </Col>
      </Row>
    </>
  )
})

export default selectModuleType
