import React, { useState } from 'react'
import { Row } from 'antd'
import Modal from 'components/Modal'
import { ShopifyProductItem } from 'models/talent/talent-profile-module.model'
import DotLoading from 'components/DotLoading'
import { SHOPIFY_DOMAIN } from 'constants/shopify'
import { PRODUCT_TYPES, MODAL_STEPS } from 'redux/Shopify/types'

import './index.scss'

import makeAddCollection from './steps/addCollection'
import makeAddProduct from './steps/addProduct'
import makeAddStoreSuccess from './steps/addStoreSuccess'
import makeCreateAccount from './steps/createAccount'
import makeEmpty from './steps/empty'
import makeLoading from './steps/loading'
import makeLogin from './steps/login'
import makeLoginSuccess from './steps/loginSuccess'
import makeSelectModuleType from './steps/selectModuleType'

interface ConnectShopifyModalProps {
  toggleModal: (value: boolean) => void
  reloadCallback?: () => void
  addCollectionCallback?: () => void
  addProductCallback?: () => void
  loginSuccessCallback?: () => void
  loginCallback?: () => void
  createAccountCallback?: () => void
  selectModuleTypeCallback?: () => void
  goBackToProfileCallback?: () => void
  goBackToProductTypeCallback?: () => void
  connectToStore?: () => void
  loading?: boolean
  show: boolean
  collections?: any[]
  products?: any[]
  hasProducts?: boolean
  hasCollections?: boolean
  onSelectColection?: (id: string) => void
  onSelectProduct?: (product: ShopifyProductItem) => void
  onSelectProductType?: (type: number) => void
  productType?: PRODUCT_TYPES
  productsSelected?: ShopifyProductItem[]
  availableProducts?: ShopifyProductItem[]
  productsAdded?: ShopifyProductItem[]
  step: MODAL_STEPS
}

const ConnectToShopifyModal = ({
  toggleModal,
  reloadCallback,
  step,
  loading = false,
  show,
  collections,
  onSelectColection,
  onSelectProductType,
  productType,
  products = [],
  hasProducts,
  hasCollections,
  productsSelected,
  availableProducts,
  productsAdded,
  onSelectProduct,
  addCollectionCallback,
  addProductCallback,
  loginSuccessCallback,
  loginCallback,
  createAccountCallback,
  connectToStore,
  selectModuleTypeCallback,
  goBackToProfileCallback,
  goBackToProductTypeCallback
}: ConnectShopifyModalProps) => {
  const [isReloading, setIsReloading] = useState(false)

  const redirectToShopify = () => {
    toggleModal(false)
    window && window.open(`${SHOPIFY_DOMAIN}/free-trial?ref=komi`)
  }

  const goBackToProfile = () => {
    toggleModal(false)
    goBackToProfileCallback && goBackToProfileCallback()
  }

  const handleReload = async () => {
    try {
      setIsReloading(true)
      await reloadCallback?.()
    } catch (error) {
    } finally {
      setIsReloading(false)
    }
  }

  const getView = (step: MODAL_STEPS) => {
    const stepMap = {
      [MODAL_STEPS.ADD_COLLECTION]: () =>
        makeAddCollection({
          hasProducts,
          collections,
          callback: addCollectionCallback,
          select: onSelectColection,
          back: goBackToProductTypeCallback,
          close: goBackToProfile
        }),
      [MODAL_STEPS.ADD_MORE_PRODUCT]: () =>
        makeAddProduct({
          callback: addProductCallback,
          select: onSelectProduct,
          back: goBackToProductTypeCallback,
          close: goBackToProfile,
          productsSelected,
          availableProducts,
          productsAdded,
          products,
          hasCollections,
          showListSelected: true // replaces step === MODAL_STEPS.ADD_MORE_PRODUCT
        }),
      [MODAL_STEPS.ADD_PRODUCT]: () =>
        makeAddProduct({
          callback: addProductCallback,
          select: onSelectProduct,
          back: goBackToProductTypeCallback,
          close: goBackToProfile,
          productsSelected,
          availableProducts,
          productsAdded,
          products,
          hasCollections,
          showListSelected: false
        }),
      [MODAL_STEPS.ADD_STORE_SUCCESS]: () =>
        makeAddStoreSuccess({
          callback: loginSuccessCallback,
          back: goBackToProfile
        }),
      [MODAL_STEPS.CREATE_ACCOUNT]: () =>
        makeCreateAccount({
          back: connectToStore,
          callback: redirectToShopify
        }),
      [MODAL_STEPS.EMPTY]: () =>
        makeEmpty({
          isReloading,
          close: () => toggleModal(false),
          reload: handleReload
        }),
      [MODAL_STEPS.LOADING]: () => makeLoading(),
      [MODAL_STEPS.LOGIN]: () =>
        makeLogin({
          callback: loginCallback,
          createAccount: createAccountCallback
        }),
      [MODAL_STEPS.LOGIN_SUCCESS]: () =>
        makeLoginSuccess({
          callback: loginSuccessCallback,
          back: goBackToProfile
        }),
      [MODAL_STEPS.SELECT_MODULE_TYPE]: () =>
        makeSelectModuleType({
          productType,
          callback: selectModuleTypeCallback,
          select: onSelectProductType
        })
    }

    const make = stepMap[step]

    return make()
  }

  const view = getView(step)

  const title = view?.title || ''
  const content = loading ? (
    <Row justify="space-between" align="middle" className="wrapper-loading">
      <DotLoading />
    </Row>
  ) : (
    view?.content
  )

  const footer = loading ? null : view?.footer || null

  return (
    <Modal
      closable
      centered
      className="shopify-modal"
      visible={show}
      title={title}
      width={664}
      onCancel={() => toggleModal(false)}
      footer={footer}
    >
      <div className="p__x--24 p__y--20">{content}</div>
    </Modal>
  )
}

export default ConnectToShopifyModal
