import React from "react";

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

import * as S from "./style";

const RestorePageModal = (props: IRestorePageProps): JSX.Element => {
	const { isOpen, toggleModal, isChild, hasIssues, restorePage } = props;

	const buttonText = hasIssues ? "Ok, restore it" : "Yes, restore it";

	const mainRestoreAction = { title: buttonText, onClick: restorePage };
	const secondaryModalAction = { title: "Cancel", onClick: toggleModal };

	const title = hasIssues ? "Possible compatibility issues" : "Restore item";
	const modalText = hasIssues ? (
		<>
			Restoring deleted items <strong>may cause conflicts if their structure has changed since removal</strong>. Please
			review the restored content after recovery.
		</>
	) : (
		<>
			You are about to restore this item.{" "}
			<strong>It will reappear on your site exactly as it was before it was deleted.</strong> Are you sure you want to
			continue?
		</>
	);

	return (
		<Modal
			isOpen={isOpen}
			hide={toggleModal}
			title={title}
			secondaryAction={secondaryModalAction}
			mainAction={mainRestoreAction}
			size="S"
			height={240}
			isChild={isChild}
		>
			<S.ModalContent>{modalText}</S.ModalContent>
		</Modal>
	);
};

interface IRestorePageProps extends IModal {
	hasIssues: boolean;
	restorePage(): void;
}

export default RestorePageModal;
