import { HiddenField, SideModal } from "@ax/components";
import { useModal } from "@ax/hooks";
import type { IComponent, ModuleCategoryInfo } from "@ax/types";

const EmptyContainer = (props: IProps) => {
	const { hasMultipleOptions, whiteList, handleAdd, goTo, componentOptions, title, categories, theme, disabled } =
		props;
	const { isOpen, toggleModal } = useModal();

	const handleClick = () => (hasMultipleOptions ? toggleModal() : goTo());

	const displayName = title ? title : whiteList?.[0];

	return (
		<>
			<HiddenField
				title={displayName || ""}
				showField={handleClick}
				hasMultipleOptions={hasMultipleOptions}
				disabled={disabled}
			/>
			{hasMultipleOptions && (
				<SideModal
					optionsType={"components"}
					whiteList={whiteList}
					categories={categories}
					toggleModal={toggleModal}
					onClick={handleAdd}
					isOpen={isOpen}
					componentOptions={componentOptions}
					theme={theme}
				/>
			)}
		</>
	);
};

interface IProps {
	hasMultipleOptions: boolean | undefined;
	whiteList: string[] | undefined;
	goTo: () => void;
	componentOptions: any;
	title?: string;
	categories?: ModuleCategoryInfo[];
	handleAdd: (option: string | IComponent) => void;
	theme: string;
	disabled?: boolean;
}

export default EmptyContainer;
