import type { Dispatch, SetStateAction } from "react";

import { AsyncSelect, FieldsBehavior, Modal } from "@ax/components";
import type { IModal } from "@ax/types";

import * as S from "./style";

const DeleteModal = (props: IDeleteModal): JSX.Element => {
	const { isOpen, toggleModal, onDelete, isTranslated, deleteAllVersions, setDeleteAllVersions, title } = props;

	const options = [
		{
			title: "Delete only this version",
			name: "deletePage",
			value: false,
		},
		{
			title: "Delete all languages versions",
			name: "deleteAll",
			value: true,
		},
	];

	const formTitle = title ? <strong>{title}</strong> : "this form";

	const mainAction = { title: "Delete form", onClick: onDelete };
	const secondaryAction = { title: "Cancel", onClick: toggleModal };

	return (
		<Modal
			isOpen={isOpen}
			hide={toggleModal}
			title="Delete Form"
			secondaryAction={secondaryAction}
			mainAction={mainAction}
			size="S"
			height="auto"
		>
			{isTranslated ? (
				<>
					<S.ModalContent>
						<p>
							Are you sure you want to delete {formTitle}? If you delete it, this form <strong>cannot be added</strong>
							to the pages. Also, this form has some translations associated.
						</p>
						<FieldsBehavior
							name="removeAllVersions"
							fieldType="RadioGroup"
							value={deleteAllVersions}
							options={options}
							onChange={setDeleteAllVersions}
						/>
					</S.ModalContent>
				</>
			) : (
				<S.ModalContent>
					Are you sure you want to delete {formTitle}?
					<br />
					If you delete it, this form <strong>cannot be added</strong> to the pages.
					<br />
					<strong>This action cannot be undone</strong>.
				</S.ModalContent>
			)}
		</Modal>
	);
};

const UnPublishModal = (props: IUnpublishModal): JSX.Element => {
	const { isOpen, toggleModal, onUnpublish, title } = props;

	const formTitle = title ? <strong>{title}</strong> : "this form";

	const mainAction = { title: "Unpublish form", onClick: onUnpublish };
	const secondaryAction = { title: "Cancel", onClick: toggleModal };

	return (
		<Modal
			isOpen={isOpen}
			hide={toggleModal}
			title="Unpublish Form"
			secondaryAction={secondaryAction}
			mainAction={mainAction}
			size="S"
			height="auto"
		>
			<S.ModalContent>
				Are you sure you want to unpublish {formTitle}?
				<br />
				If you do it, this form <strong>cannot be added</strong> to the pages.
				<br />
				<strong>This action cannot be undone</strong>.
			</S.ModalContent>
		</Modal>
	);
};

const DuplicateModal = (props: IDuplicateModal): JSX.Element => {
	const { isOpen, toggleModal, onDuplicate, title, handleChange } = props;

	const mainAction = { title: "Duplicate form", onClick: onDuplicate, disabled: !title.length };
	const secondaryAction = { title: "Cancel", onClick: toggleModal };

	return (
		<Modal
			isOpen={isOpen}
			hide={toggleModal}
			title="Duplicate form"
			secondaryAction={secondaryAction}
			mainAction={mainAction}
			size="S"
			height="auto"
		>
			<S.ModalContent>
				<p>Please enter a new name for the duplicated form.</p>
				<FieldsBehavior
					fieldType="TextField"
					name="title"
					title="Form name"
					mandatory={true}
					value={title}
					onChange={handleChange}
					placeholder="Type a name for this form"
				/>
			</S.ModalContent>
		</Modal>
	);
};

const CopyModal = (props: ICopyModal): JSX.Element => {
	const { isOpen, toggleModal, onCopy, setSite, site, lang, currentSite } = props;

	const handleSelectChange = (value: string | number | null) => {
		if (typeof value === "number") setSite(value);
	};

	const mainAction = { title: "Copy form", onClick: onCopy, disabled: !site };
	const secondaryAction = { title: "Cancel", onClick: toggleModal };

	return (
		<Modal
			isOpen={isOpen}
			hide={toggleModal}
			size="S"
			title="Copy form in another site"
			mainAction={mainAction}
			secondaryAction={secondaryAction}
			overflow="visible"
			height="auto"
		>
			<S.ModalContent>
				<p>
					<strong>Select a site to copy this form. </strong>
					<br />
					You can only select sites with the same language as this form.
				</p>
				<S.SelectWrapper>
					<AsyncSelect
						name="select"
						entity="sites"
						onChange={handleSelectChange}
						value={site}
						mandatory={true}
						filterLang={lang}
						filter={[currentSite]}
					/>
				</S.SelectWrapper>
			</S.ModalContent>
		</Modal>
	);
};

const UpdateModal = (props: IUpdateModal): JSX.Element => {
	const { isOpen, toggleModal, onUpdate } = props;

	const mainAction = { title: "Update changes", onClick: onUpdate };
	const secondaryAction = { title: "Cancel", onClick: toggleModal };

	return (
		<Modal
			isOpen={isOpen}
			hide={toggleModal}
			title="Confirm Changes to Form"
			secondaryAction={secondaryAction}
			mainAction={mainAction}
			size="S"
			height="auto"
		>
			<S.ModalContent>
				Saving changes <strong>will update this form on all pages where it’s in use.</strong>
				<br />
				Please ensure all changes are correct, as{" "}
				<strong>adding or removing fields will affect the data sent to the CRM.</strong>
			</S.ModalContent>
		</Modal>
	);
};

interface IDeleteModal extends IModal {
	onDelete(): void;
	isTranslated: boolean;
	deleteAllVersions: boolean;
	setDeleteAllVersions: Dispatch<SetStateAction<boolean>>;
	title?: string;
}

interface IUnpublishModal extends IModal {
	onUnpublish(): void;
	title?: string;
}

interface IDuplicateModal extends IModal {
	onDuplicate(): void;
	title: string;
	handleChange(title: string): void;
}

interface ICopyModal extends IModal {
	onCopy(): void;
	setSite: Dispatch<SetStateAction<number | null>>;
	site: number | null;
	lang: number;
	currentSite: number | null;
}

interface IUpdateModal extends IModal {
	onUpdate(): void;
}

export { DeleteModal, UnPublishModal, DuplicateModal, CopyModal, UpdateModal };
