import { connect } from "react-redux";
import { pageEditorActions } from "@ax/containers/PageEditor";
import { Browser } from "@ax/components";
import type { HeadingFilter, ILanguage, IRootState, ISchema, ISocialState } from "@ax/types";

const PageBrowser = (props: IProps) => {
	const {
		socials,
		cloudinaryName,
		content: { path, slug, canonicalSite },
		setSelectedContent,
		globalLangs,
		theme,
		isReadOnly,
		isPreview,
		browserRef,
		isHeadingsPreviewOpen = false,
		isKeywordsPreviewOpen = false,
		headingsFilter,
		keywordsFilter,
		deleteModule,
		duplicateModule,
		copyModule,
		setScrollEditorID,
		toggleHeadingsPreview,
		toggleKeywordsPreview,
	} = props;

	const slugWithSlash = slug ? (slug.startsWith("/") ? slug : `/${slug}`) : "";
	const pathWithoutSlash = path ? (path.endsWith("/") ? path.slice(0, -1) : path) : "";
	const url = `${pathWithoutSlash}${slugWithSlash}`;
	const editorType = isHeadingsPreviewOpen ? "headings" : isKeywordsPreviewOpen ? "keywords" : "page";

	const actions = {
		deleteModuleAction: deleteModule,
		duplicateModuleAction: duplicateModule,
		copyModuleAction: copyModule,
		setSelectedContentAction: setSelectedContent,
		setScrollEditorIDAction: setScrollEditorID,
	};

	return (
		<Browser
			isPage={true}
			content={props.content}
			socials={socials}
			url={url}
			theme={theme}
			cloudinaryName={cloudinaryName}
			siteLangs={globalLangs}
			disabled={isReadOnly}
			siteID={canonicalSite}
			isPreview={isPreview}
			showIframe={true}
			browserRef={browserRef}
			actions={actions}
			editorType={editorType}
			toggleHeadingsPreview={toggleHeadingsPreview}
			headingFilter={headingsFilter}
			toggleKeywordsPreview={toggleKeywordsPreview}
			keywordsFilter={keywordsFilter}
		/>
	);
};

interface IPageBrowserStateProps {
	// TODO: Define content Type
	content: any;
	socials: ISocialState;
	cloudinaryName: string | null;
	globalLangs: ILanguage[];
	schema: ISchema | Record<string, unknown>;
	selectedParent: any;
}

interface IPageBrowserDispatchProps {
	setSelectedContent(editorID: number): void;
	theme: string;
	isReadOnly: boolean;
	isPreview?: boolean;
	browserRef?: any;
	isHeadingsPreviewOpen?: boolean;
	isKeywordsPreviewOpen?: boolean;
	headingsFilter?: HeadingFilter;
	keywordsFilter?: string[];
	deleteModule(editorID: number[]): void;
	duplicateModule(editorID: number[]): number;
	copyModule(editorID: number[]): number | boolean;
	setScrollEditorID(editorID: number | null): void;
	toggleHeadingsPreview?(): void;
	toggleKeywordsPreview?(): void;
}

type IProps = IPageBrowserStateProps & IPageBrowserDispatchProps;

const mapStateToProps = (state: IRootState): IPageBrowserStateProps => ({
	content: { ...state.pageEditor.editorContent },
	socials: state.social,
	cloudinaryName: state.app.globalSettings.cloudinaryName,
	globalLangs: state.app.globalLangs,
	schema: state.pageEditor.schema,
	selectedParent: state.pageEditor.selectedParent,
});

const mapDispatchToProps = {
	setSelectedContent: pageEditorActions.setSelectedContent,
	deleteModule: pageEditorActions.deleteModule,
	duplicateModule: pageEditorActions.duplicateModule,
	copyModule: pageEditorActions.copyModule,
	setScrollEditorID: pageEditorActions.setScrollEditorID,
};

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