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 "./GriddoCoreComponent";

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

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

// -----------------------------------------------------------------------------
// Whitelist types for <GriddoComponent>
// -----------------------------------------------------------------------------
// 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 ComponentProps = AutoType.BasicCard;

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

// -----------------------------------------------------------------------------
// Component named export
// -----------------------------------------------------------------------------
export { BasicCard, GriddoComponent };

// -----------------------------------------------------------------------------
// Griddo bundle export
// -----------------------------------------------------------------------------
export default components;