import { useSelector, useDispatch } from 'react-redux'
import { Label, Hint, Required, DataTag, Placeholder, HelpCenter, SettingsTab } from '@epicformbuilder/admin/editor/components'
import HowToLink from '@epicformbuilder/admin/editor/components/HowToLink'
import QuillEditor from '@epicformbuilder/admin/editor/components/QuillEditor'
import Options from '@epicformbuilder/admin/editor/components/Options'
import {
  updateComponentProperty, updateComponentProperties, updateAllComponentsProperty,
  updateActionProperty, getFormSelector, getTypeTagsSelector,
} from '@epicformbuilder/admin/data'

/**
 * Editor building blocks for add-on editor code. A separate, unfrozen global,
 * because `__EPICFORMBUILDER__` is frozen. Must run before add-ons load.
 */
export function exposeEditorApi(): void {
  ;( window as any ).__EPICFORMBUILDER_EDITOR__ = {
    components: { Label, Hint, Required, DataTag, Placeholder, HelpCenter, SettingsTab, HowToLink, QuillEditor, Options },
    data: { updateComponentProperty, updateComponentProperties, updateAllComponentsProperty, updateActionProperty, getFormSelector, getTypeTagsSelector },
    react: { useSelector, useDispatch },
  }
}