import { connect } from "react-redux";

import { formsActions } from "@ax/containers/Forms";
import { getFormTemplate } from "@ax/helpers";
import type { IErrorItem, IRootState } from "@ax/types";

import Field from "./Field";
import TemplateManager from "./TemplateManager";

const ConnectedField = (props: any) => {
	const {
		whiteList,
		objKey,
		selectedTab,
		field,
		selectedContent,
		goTo,
		updateFormContent,
		selectedEditorID,
		pages,
		actions,
		site,
		lang,
		errors,
		theme,
		moduleCopy,
		template,
		setHistoryPush,
		languages,
		isReadOnly,
		setErrors,
	} = props;

	const isTemplate = field.type === "template" || field.type === "formTemplate";
	const isFieldReadOnly = isReadOnly || field.readonly;
	const isDisabled = isFieldReadOnly || field.disabled;
	const error: IErrorItem = errors.find((err: IErrorItem) => err.editorID === selectedEditorID && err.key === objKey);

	const updateValue = (key: string, value: any, templateID?: number) => {
		const editorID = templateID ? templateID : selectedEditorID;
		updateFormContent(editorID, key, value);
	};

	const deleteError = (error: IErrorItem) => {
		const updatedErrors: IErrorItem[] = errors.filter(
			(err: IErrorItem) => !(error.editorID === err.editorID && error.key === err.key),
		);
		setErrors(updatedErrors);
	};

	if (isTemplate) {
		const templateType: string | undefined = selectedContent[field.key]?.templateType;
		const template = templateType ? getFormTemplate(templateType) : null;

		if (!template) {
			actions.setNotificationAction?.({ text: "Form template schema not found.", type: "error" });
			return <></>;
		}

		return (
			<TemplateManager
				template={template}
				updateValue={updateValue}
				goTo={goTo}
				objKey={objKey}
				pages={pages}
				selectedTab={selectedTab}
				selectedContent={selectedContent}
				actions={actions}
				site={site}
				disabled={isDisabled}
				errors={errors}
				theme={theme}
				moduleCopy={moduleCopy}
				setHistoryPush={setHistoryPush}
				lang={lang.id}
				deleteError={deleteError}
			/>
		);
	}

	return (
		<Field
			whiteList={whiteList}
			objKey={objKey}
			field={field}
			selectedContent={selectedContent}
			goTo={goTo}
			updateValue={updateValue}
			pages={pages}
			actions={actions}
			site={site}
			lang={lang.id}
			disabled={isDisabled}
			readonly={isFieldReadOnly}
			error={error}
			errors={errors}
			theme={theme}
			moduleCopy={moduleCopy}
			template={template}
			setHistoryPush={setHistoryPush}
			languages={languages}
			deleteError={deleteError}
		/>
	);
};

const mapStateToProps = (state: IRootState) => ({
	selectedEditorID: state.forms.selectedEditorID,
	selectedContent: { ...state.forms.selectedContent },
	pages: state.sites.currentSitePages,
	site: state.sites.currentSiteInfo,
	lang: state.app.lang,
	moduleCopy: state.forms.moduleCopy,
	template: state.forms.template,
	languages: state.sites.currentSiteLanguages,
});

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

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