import { connect } from "react-redux";
import { formsActions } from "@ax/containers/Forms";

import { Browser } from "@ax/components";
import type { ILanguage, IRootState, ISchema, ISite, ISocialState } from "@ax/types";

import * as S from "./style";

const PageBrowser = (props: IProps) => {
	const {
		socials,
		cloudinaryName,
		content,
		setSelectedContent,
		globalLangs,
		theme,
		isReadOnly,
		isPreview,
		browserRef,
		currentSiteInfo,
	} = props;

	const { id: siteID } = currentSiteInfo || {};

	const actions = {
		setSelectedContentAction: setSelectedContent,
	};

	return (
		<S.Wrapper>
			<Browser
				isPage={true}
				content={content}
				socials={socials}
				url={""}
				theme={theme}
				cloudinaryName={cloudinaryName}
				siteLangs={globalLangs}
				disabled={isReadOnly}
				siteID={siteID}
				isPreview={isPreview}
				showIframe={true}
				browserRef={browserRef}
				actions={actions}
				editorType="form"
			/>
		</S.Wrapper>
	);
};

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

interface IPageBrowserDispatchProps {
	setSelectedContent(editorID: number): void;
	theme: string;
	isReadOnly: boolean;
	isPreview?: boolean;
	browserRef?: any;
}

type IProps = IPageBrowserStateProps & IPageBrowserDispatchProps;

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

const mapDispatchToProps = {
	setSelectedContent: formsActions.setSelectedContent,
};

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