import type React from "react";

import { Button, ErrorToast, FieldsBehavior, Modal, Select } from "@ax/components";
import type { IModal, ISite } from "@ax/types";

import * as S from "./style";

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

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

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

	const mainAction = {
		title: isDeleting ? "Deleting" : "Delete page",
		onClick: onDelete,
		disabled: isDeleting,
	};

	const secondaryAction = { title: "Cancel", onClick: toggleModal };

	return (
		<Modal
			isOpen={isOpen}
			hide={toggleModal}
			title="Delete Page?"
			secondaryAction={secondaryAction}
			mainAction={mainAction}
			size="S"
		>
			{isTranslated ? (
				<>
					<S.ModalContent>
						<p>
							You are going to delete {pageTitle} page that have some translations associated. Choose if you want to
							delete all languages versions or only this one.
						</p>
						<FieldsBehavior
							name="removeAllVersions"
							fieldType="RadioGroup"
							value={deleteAllVersions}
							options={options}
							onChange={setDeleteAllVersions}
						/>
					</S.ModalContent>
				</>
			) : (
				<S.ModalContent>
					Are you sure you want to delete {pageTitle} page?
					<br />
					This action <strong>cannot be undone</strong>.
				</S.ModalContent>
			)}
		</Modal>
	);
};

const MainActionButton = (props: IActionButton): JSX.Element => (
	<Button type="button" onClick={props.onClick} disabled={props.disabled}>
		{props.title}
	</Button>
);

const SecondaryActionButton = (props: IActionButton): JSX.Element => (
	<Button type="button" buttonStyle="text" onClick={props.onClick}>
		{props.title}
	</Button>
);

const CopyModal = (props: ICopyModal): JSX.Element => {
	const { isOpen, toggleModal, setSite, sites, site, onCopy } = props;
	const sitesOptions = sites.map((site: ISite) => ({ label: site.name, value: site.id.toString() }));

	const mainAction = {
		title: "Copy page",
		onClick: onCopy,
		disabled: !site,
	};

	const secondaryAction = { title: "Cancel", onClick: toggleModal };

	return (
		<Modal
			isOpen={isOpen}
			hide={toggleModal}
			size="S"
			title="Copy page in another site"
			mainAction={mainAction}
			secondaryAction={secondaryAction}
			overflow="visible"
		>
			<S.ModalContent>
				<p>
					<strong>Select a site to copy this page. </strong>
					<br />
					You can only select sites with the same language as this page.
				</p>
				<S.SelectWrapper>
					<Select
						name="select"
						options={sitesOptions}
						onChange={(value: string) => setSite(value)}
						value={site?.toString() || ""}
						mandatory={true}
					/>
				</S.SelectWrapper>
			</S.ModalContent>
		</Modal>
	);
};

const DuplicatePageModal = (props: IDuplicatePageModal): JSX.Element => {
	const { isOpen, toggleModal, modalState, onNameChange, onSlugChange, onDuplicate, isSaving } = props;

	const mainAction = {
		title: "Duplicate",
		onClick: onDuplicate,
		disabled: !modalState.title.trim() || !modalState.slug.trim() || isSaving,
	};

	const secondaryAction = { title: "Cancel", onClick: toggleModal };

	return (
		<Modal
			isOpen={isOpen}
			hide={toggleModal}
			title="Duplicate page"
			secondaryAction={secondaryAction}
			mainAction={mainAction}
			size="M"
		>
			<ErrorToast />
			{isOpen ? (
				<S.ModalContent>
					<FieldsBehavior
						fieldType="TextField"
						name="title"
						title="Title"
						mandatory={true}
						value={modalState.title}
						onChange={onNameChange}
					/>
					<FieldsBehavior
						fieldType="TextField"
						name="slug"
						title="Slug"
						mandatory={true}
						value={modalState.slug}
						onChange={onSlugChange}
					/>
				</S.ModalContent>
			) : null}
		</Modal>
	);
};

const RemovePageModal = (props: IRemovePageModal): JSX.Element => {
	const { isOpen, toggleModal, pageTitle, onRemove } = props;

	const mainAction = {
		title: "Remove",
		onClick: onRemove,
	};

	const secondaryAction = { title: "Cancel", onClick: toggleModal };

	return (
		<Modal
			isOpen={isOpen}
			hide={toggleModal}
			title="Remove page from this site?"
			secondaryAction={secondaryAction}
			mainAction={mainAction}
			size="S"
		>
			{isOpen ? (
				<S.ModalContent>
					<p>
						Are you sure you want to remove <strong>'{pageTitle}'</strong> from this site?
						<br />
						This action <strong>cannot be undone</strong>.
					</p>
				</S.ModalContent>
			) : null}
		</Modal>
	);
};

const UnpublishPageModal = (props: IUnpublishPageModal): JSX.Element => {
	const { isOpen, toggleModal } = props;

	const mainAction = { title: "Ok", onClick: toggleModal };

	return (
		<Modal isOpen={isOpen} hide={toggleModal} size="S" title="Unpublish Modified Page" mainAction={mainAction}>
			{isOpen && (
				<S.ModalContent>
					<p>
						There are some saved changes that are not published on this page. To Unpublish this page,{" "}
						<strong>you must publish these changes or discard them.</strong>
					</p>
				</S.ModalContent>
			)}
		</Modal>
	);
};

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

interface IActionButton {
	onClick: () => void;
	title: string;
	disabled?: boolean;
}

interface ICopyModal extends IModal {
	setSite: React.Dispatch<React.SetStateAction<any>>;
	sites: ISite[];
	site: string | null;
	onCopy: () => void;
}

interface IDuplicatePageModal extends IModal {
	modalState: { title: string; slug: string };
	onNameChange: (value: string) => void;
	onSlugChange: (value: string) => void;
	onDuplicate: () => void;
	isSaving: boolean;
}

interface IRemovePageModal extends IModal {
	pageTitle: string;
	onRemove: () => void;
}

interface IUnpublishPageModal extends IModal {}

export {
	DeleteModal,
	CopyModal,
	DuplicatePageModal,
	RemovePageModal,
	UnpublishPageModal,
	MainActionButton,
	SecondaryActionButton,
};
