import { connect } from "react-redux";
import { pageEditorActions } from "@ax/containers/PageEditor";
import { ConfigPanel, ResizePanel } from "@ax/components";
import type {
	HeadingFilter,
	IBreadcrumbItem,
	IModule,
	INotification,
	IRootState,
	ISchema,
	IUserEditing,
} from "@ax/types";
import PageBrowser from "../PageBrowser";

const Editor = (props: IProps) => {
	const {
		setSelectedContent,
		selectedTab,
		schema,
		breadcrumb,
		selectedParent,
		activatedModules,
		setSelectedTab,
		deleteModule,
		addComponent,
		addModule,
		moveElement,
		replaceModule,
		duplicateModule,
		replaceElementsInCollection,
		isLoading,
		isGlobal,
		isEditable,
		isReadOnly,
		userEditing,
		copyModule,
		pasteModule,
		theme,
		browserRef,
		setNotification,
		isEditLive,
		isDisabled,
		toggleHeadingsPreview,
		toggleKeywordsPreview,
		isHeadingsPreviewOpen,
		isKeywordsPreviewOpen,
		headingsFilter,
		keywordsFilter,
	} = props;

	const actions = {
		deleteModuleAction: deleteModule,
		addComponentAction: addComponent,
		addModuleAction: addModule,
		moveModuleAction: moveElement,
		replaceModuleAction: replaceModule,
		duplicateModuleAction: duplicateModule,
		replaceElementsInCollectionAction: replaceElementsInCollection,
		copyModuleAction: copyModule,
		pasteModuleAction: pasteModule,
		setNotificationAction: setNotification,
		toggleHeadingsPreviewAction: toggleHeadingsPreview,
		toggleKeywordsPreviewAction: toggleKeywordsPreview,
	};

	return (
		<ResizePanel
			disabled={isHeadingsPreviewOpen || isKeywordsPreviewOpen}
			leftPanel={
				<PageBrowser
					isReadOnly={isReadOnly || isEditLive}
					theme={theme}
					browserRef={browserRef}
					isHeadingsPreviewOpen={isHeadingsPreviewOpen}
					toggleHeadingsPreview={toggleHeadingsPreview}
					headingsFilter={headingsFilter}
					toggleKeywordsPreview={toggleKeywordsPreview}
					isKeywordsPreviewOpen={isKeywordsPreviewOpen}
					keywordsFilter={keywordsFilter}
				/>
			}
			rightPanel={
				<ConfigPanel
					schema={schema}
					actions={actions}
					breadcrumb={breadcrumb}
					selectedParent={selectedParent}
					activatedModules={activatedModules}
					setSelectedContent={setSelectedContent}
					setSelectedTab={setSelectedTab}
					selectedTab={selectedTab}
					isLoading={isLoading}
					isPage={true}
					isGlobal={isGlobal}
					isEditable={isEditable}
					isReadOnly={isReadOnly}
					userEditing={userEditing}
					theme={theme}
					isEditLive={isEditLive}
					isDisabled={isDisabled}
				/>
			}
		/>
	);
};

interface IEditorStateProps {
	// TODO: Define content Type
	schema: ISchema | Record<string, unknown>;
	breadcrumb: IBreadcrumbItem[];
	selectedParent: any;
	activatedModules: string[];
	selectedTab: string;
	isLoading: boolean;
	userEditing: IUserEditing | null;
}

interface IPageBrowserDispatchProps {
	setSelectedContent(editorID: number): void;
	setSelectedTab(tab: string): void;
	deleteModule(editorID: number[], key?: string): void;
	duplicateModule(editorID: number[], key?: string): number;
	addComponent: (componentType: any, key: string) => void;
	addModule: (moduleType: string, key: string, selectedID: number, isComponentModule?: boolean) => void;
	moveElement(moduleID: number[], selectedContent: any, newIndex: number, key: string): void;
	replaceModule(module: any, parent: any, objKey: string): void;
	replaceElementsInCollection(newValue: string, reference: string): void;
	copyModule(editorID: number[]): boolean | number;
	pasteModule(editorID: number, key: string, modulesToPaste: IModule[]): Promise<{ error?: INotification }>;
	setNotification: (notification: INotification) => void;
	toggleHeadingsPreview: () => void;
	toggleKeywordsPreview: () => void;
	isGlobal: boolean;
	isEditable: boolean;
	isReadOnly: boolean;
	theme: string;
	browserRef: any;
	isEditLive: boolean;
	isDisabled: boolean;
	isHeadingsPreviewOpen: boolean;
	isKeywordsPreviewOpen: boolean;
	headingsFilter: HeadingFilter;
	keywordsFilter: string[];
}

type IProps = IEditorStateProps & IPageBrowserDispatchProps;

const mapStateToProps = (state: IRootState): IEditorStateProps => ({
	schema: state.pageEditor.schema,
	breadcrumb: state.pageEditor.breadcrumb,
	selectedParent: state.pageEditor.selectedParent,
	activatedModules: state.dataPacks.modules,
	selectedTab: state.pageEditor.tab,
	isLoading: state.app.isLoading,
	userEditing: state.pageEditor.userEditing,
});

const mapDispatchToProps = {
	setSelectedContent: pageEditorActions.setSelectedContent,
	setSelectedTab: pageEditorActions.setSelectedTab,
	deleteModule: pageEditorActions.deleteModule,
	duplicateModule: pageEditorActions.duplicateModule,
	addComponent: pageEditorActions.addComponent,
	addModule: pageEditorActions.addModule,
	moveElement: pageEditorActions.moveElement,
	replaceModule: pageEditorActions.replaceModule,
	replaceElementsInCollection: pageEditorActions.replaceElementsInCollection,
	copyModule: pageEditorActions.copyModule,
	pasteModule: pageEditorActions.pasteModule,
};

export default connect(mapStateToProps, mapDispatchToProps)(Editor);
