import { AutoType } from "@griddo/core";
import * as React from "react";

// -----------------------------------------------------------------------------
// <GriddoCoreComponent>
// -----------------------------------------------------------------------------
// GriddoCoreComponent is a closure function component that wraps a list of
// modules with Griddo utilities, for example wrappers required for display in
// the Griddo page editor.
// It is necessary to go through this component only in those that we want said
// functionalities.
// -----------------------------------------------------------------------------
// eslint-disable-next-line import/order
import { GriddoCoreComponent } from "../components/GriddoCoreComponent";

// -----------------------------------------------------------------------------
// Import React modules
// -----------------------------------------------------------------------------
// We import the modules with React.lazy to get code splitting in the
// builder and shrink the bundle.
// -----------------------------------------------------------------------------
const CardCollection = React.lazy(() => import("./CardCollection"));

// -----------------------------------------------------------------------------
// Whitelist modules for <GriddoModule>
// -----------------------------------------------------------------------------
// Generate a modules object to pass to <GriddoModule> as a valid list of
// components of the instance that we need to select or interact with them in
// the editor.
// -----------------------------------------------------------------------------
const modules = {
	CardCollection
};

// -----------------------------------------------------------------------------
// Whitelist types for <GriddoModule>
// -----------------------------------------------------------------------------
// We create an union type with all the props to pass it to <GriddoComponent>,
// that way way when we use <GriddoComponent> if we pass it the component prop
// we will have autocompletion and safe access to the props of said component.
// -----------------------------------------------------------------------------
type ModulesProps = AutoType.CardCollection;

// -----------------------------------------------------------------------------
// <GriddoModule>
// -----------------------------------------------------------------------------
// This closure function returns the modules that are passed through the props
// libComponents, wrapped with functionality needed by the editor Griddo pages.
// -----------------------------------------------------------------------------
const GriddoModule = (props: ModulesProps) => {
	const { component } = props;
	return (
		<GriddoCoreComponent
			component={component as string}
			libComponents={modules}
			{...props}
		/>
	);
};

// -----------------------------------------------------------------------------
// Module named export
// -----------------------------------------------------------------------------
export { CardCollection, GriddoModule };

// -----------------------------------------------------------------------------
// Griddo bundle export
// -----------------------------------------------------------------------------
export default modules;