import React, { MutableRefObject } from 'react'
import { Box, chakra } from '@chakra-ui/react'
import { Wizard } from './components'

import { getWizardFromCallable } from './utils'

import type { WizardFieldDescription, WizardFieldElement } from '../admin/fields/FieldDescription'
import type { BaseNotifier } from '../common/notifier'
import type { Provider } from '../admin/providers/interfaces'
import type { BaseAnalytic } from '../integration/analytics'
import type { DetailObject, WizardControl } from '../typing'

type MountWizardsKwargs = {
  resourceName: string
  mainDetailObject: DetailObject
  notifier: BaseNotifier
  ViewType: string
  elements: WizardFieldDescription
  elementsKey: string
  provider: Provider
  setMainDetailObject: Function
  refreshMainDetailObject: Function
  analytics?: BaseAnalytic
  user: object
  activeWizardRef: MutableRefObject<WizardControl | null>
}

const WizardWrapper = chakra(Box, {
  baseStyle: {
    borderTop: '1px solid',
    borderColor: 'blackAlpha.300',
    _empty: {
      border: 0,
    },
  },
})

function isWizardEmpty({ elements, mainDetailObject }: MountWizardsKwargs): boolean {
  return elements.every((wizardInstance) => !getWizardFromCallable(wizardInstance, mainDetailObject))
}

const mountWizards = (kwargs: MountWizardsKwargs): JSX.Element => {
  /*
    Function mounts widgets for Wizard View.

    Widgets of Wizard View type use store.
    They do not send user data to the backend immediately, but put it in store.
  */

  const {
    mainDetailObject,
    notifier,
    ViewType,
    elements,
    elementsKey,
    provider,
    setMainDetailObject,
    refreshMainDetailObject,
    analytics,
    user,
    resourceName,
    activeWizardRef,
  } = kwargs

  return (
    <WizardWrapper border={isWizardEmpty(kwargs) ? 0 : undefined} key={elementsKey}>
      {elements.map((wizardInstance: WizardFieldElement, index) => {
        const wizard = getWizardFromCallable(wizardInstance, mainDetailObject)
        const key = `wizard-element_${index}`
        if (!wizard) {
          return <div key={key} />
        }
        return (
          <Wizard
            key={wizard.title}
            data-grid={wizard.layout}
            wizard={wizard}
            provider={provider}
            mainDetailObject={mainDetailObject}
            setMainDetailObject={setMainDetailObject}
            refreshMainDetailObject={refreshMainDetailObject}
            notifier={notifier}
            analytics={analytics}
            ViewType={ViewType}
            user={user}
            resourceName={resourceName}
            allowToggle={wizard.allowToggle}
            isExpanded={wizard.isExpanded}
            activeWizardRef={activeWizardRef}
          />
        )
      })}
    </WizardWrapper>
  )
}

export { mountWizards }