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

import ShopifyCollectionList from 'components/ShopifyCollectionList'
import { RyeModalStep } from 'redux/RyeShopify/types'

export interface IProps {
  select?: (id: string) => void
  callback?: () => void
  back?: () => void
  close?: () => void
  collections?: any[]
  hasProducts?: boolean
  fetchMoreCollections?: () => void
  hasMoreCollections?: boolean
}

export const makeAddCollection = ({
  select,
  callback,
  back,
  close,
  collections = [],
  hasProducts,
  fetchMoreCollections,
  hasMoreCollections
}: IProps): RyeModalStep => {
  let action
  let caption
  const cancellable = !hasProducts

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

  return {
    title: 'Add a Collection',
    content: (
      <>
        <Row>
          <Text preset="regular16" className="m__b--16 leading-24">
            Select a collection you would like to sync. Any changes you make to
            your collections in Shopify will be reflected on your Komi profile
            automatically.
          </Text>
        </Row>
        <Paragraph className="leading-24 m__b--16" preset="semibold16">
          Available Collections
        </Paragraph>
        <ShopifyCollectionList
          list={collections}
          onSelectColection={select}
          fetchMoreCollections={fetchMoreCollections}
          hasMore={hasMoreCollections}
        />
      </>
    ),
    footer: (
      <>
        <Row justify="end" align="middle">
          <Col>
            <Button
              className="width--216 height--52 text__transform--uppercase letter__spacing--1"
              block
              onClick={action}
              size="large"
            >
              {caption}
            </Button>
            <Button
              className="width--216 height--52 text__transform--uppercase letter__spacing--1"
              type="primary"
              block
              onClick={callback}
              size="large"
            >
              ADD COLLECTION
            </Button>
          </Col>
        </Row>
      </>
    )
  }
}

export default makeAddCollection
