import React from "react";

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

import * as S from "./style";

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

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

	return (
		<Modal
			isOpen={isOpen}
			hide={toggleModal}
			title="Delete Page?"
			secondaryAction={secondaryModalAction}
			mainAction={mainModalAction}
			size="S"
		>
			{isTranslated ? (
				<>
					<S.ModalContent>
						<p>
							You are going to delete this 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 this page?
					<br />
					This action <strong>cannot be undone</strong>.
				</S.ModalContent>
			)}
		</Modal>
	);
};

interface IDeleteModal extends IModal {
	isTranslated: boolean;
	deleteAllVersions: boolean;
	setDeleteAllVersions: React.Dispatch<React.SetStateAction<boolean>>;
}

export { DeleteModal };
