import React from 'react'
import { Button, Col, Row } from 'antd'
import { Text } from 'components/Typography'
import ShopifyProductList from 'components/ShopifyProductList'

import { ShopifyProductItem } from 'models/talent/talent-profile-module.model'
import { RyeModalStep } from 'redux/RyeShopify/types'

export interface IProps {
  callback?: () => void
  select?: (product: ShopifyProductItem) => void
  back?: () => void
  close?: () => void
  productsSelected?: ShopifyProductItem[]
  availableProducts?: ShopifyProductItem[]
  productsAdded?: ShopifyProductItem[]
  products?: any[]
  hasCollections?: boolean
  showListSelected: boolean
  fetchMoreProducts?: () => void
  hasMoreProducts?: boolean
}

const addProduct = ({
  callback,
  select,
  back,
  close,
  products = [],
  hasCollections,
  productsSelected,
  availableProducts,
  productsAdded,
  showListSelected,
  fetchMoreProducts,
  hasMoreProducts
}: IProps): RyeModalStep => {
  let action
  let caption
  const cancellable = showListSelected || !hasCollections

  if (cancellable) {
    caption = 'CANCEL'
    action = close
  } else {
    caption = 'PREVIOUS'
    action = back
  }

  return {
    title: 'Add Products',
    content: (
      <>
        <Row>
          <Text preset="regular16" className="m__b--16 leading-24">
            Select products you would like to sync. Any changes you make to your
            products in Shopify will be reflected on your Komi profile
            automatically.
          </Text>
        </Row>
        <ShopifyProductList
          list={products}
          onSelectProduct={select}
          productsSelected={productsSelected}
          showListSelected={showListSelected}
          availableProducts={availableProducts}
          productsAdded={productsAdded}
          fetchMoreProducts={fetchMoreProducts}
          hasMoreProducts={hasMoreProducts}
        />
      </>
    ),
    footer: (
      <>
        <Row justify="end" align="middle">
          <Col>
            <Button
              className="width--184 height--52 text__transform--uppercase letter__spacing--1"
              block
              onClick={action}
              size="large"
            >
              {caption}
            </Button>
            <Button
              className="width--184 height--52 text__transform--uppercase letter__spacing--1"
              type="primary"
              block
              onClick={callback}
              size="large"
            >
              ADD PRODUCTS
            </Button>
          </Col>
        </Row>
      </>
    )
  }
}

export default addProduct
