/**
 * Content Type Confirmation Modal Component.
 *
 * Prompts user for action when including/excluding content types.
 *
 * @package Sideconvo
 */

import './content-type-confirm-modal.css';

interface ContentTypeConfirmModalProps {
	action: 'include' | 'exclude';
	contentTypeName: string;
	existingCount: number;
	onConfirm: (option: 'all' | 'new-only') => void;
	onCancel: () => void;
}

/**
 * ContentTypeConfirmModal component.
 *
 * @param {ContentTypeConfirmModalProps} props Component props.
 * @return {JSX.Element} Modal component.
 */
export default function ContentTypeConfirmModal({
	action,
	contentTypeName,
	existingCount,
	onConfirm,
	onCancel,
}: ContentTypeConfirmModalProps) {
	return (
		<div
			className="content-type-modal__overlay"
			onClick={onCancel}
		>
			<div
				className="content-type-modal"
				onClick={(e) => e.stopPropagation()}
			>
				<div className="content-type-modal__header">
					<h3>
						{action === 'include'
							? `Include ${contentTypeName} in Sideconvo`
							: `Exclude ${contentTypeName} from Sideconvo`}
					</h3>
				</div>

				<div className="content-type-modal__body">
					<p className="content-type-modal__count">
						You have <strong>{existingCount}</strong> existing{' '}
						{contentTypeName.toLowerCase()}.
					</p>

					<p className="content-type-modal__question">
						What would you like to do with existing{' '}
						{contentTypeName.toLowerCase()}?
					</p>

					{action === 'include' ? (
						<div className="content-type-modal__options">
							<label className="content-type-modal__option">
								<input
									type="radio"
									name="bulk-action"
									value="all"
									defaultChecked
								/>
								<div className="content-type-modal__option-content">
									<h4>Index all existing {contentTypeName.toLowerCase()} now</h4>
									<p>
										All {existingCount} {contentTypeName.toLowerCase()} will be
										synced to Sideconvo immediately.
									</p>
								</div>
							</label>

							<label className="content-type-modal__option">
								<input
									type="radio"
									name="bulk-action"
									value="new-only"
								/>
								<div className="content-type-modal__option-content">
									<h4>
										Only index new {contentTypeName.toLowerCase()} from now on
									</h4>
									<p>
										Existing {contentTypeName.toLowerCase()} will not be synced.
										Only {contentTypeName.toLowerCase()} created after today will
										be automatically indexed.
									</p>
								</div>
							</label>
						</div>
					) : (
						<div className="content-type-modal__options">
							<label className="content-type-modal__option">
								<input
									type="radio"
									name="bulk-action"
									value="all"
									defaultChecked
								/>
								<div className="content-type-modal__option-content">
									<h4>
										Exclude all existing {contentTypeName.toLowerCase()} in bulk
									</h4>
									<p>
										All {existingCount} {contentTypeName.toLowerCase()} will be
										removed from Sideconvo immediately.
									</p>
								</div>
							</label>

							<label className="content-type-modal__option">
								<input
									type="radio"
									name="bulk-action"
									value="new-only"
								/>
								<div className="content-type-modal__option-content">
									<h4>
										Only stop syncing new {contentTypeName.toLowerCase()}
									</h4>
									<p>
										Existing synced {contentTypeName.toLowerCase()} will remain
										in Sideconvo. Only new {contentTypeName.toLowerCase()} will
										not be synced.
									</p>
								</div>
							</label>
						</div>
					)}
				</div>

				<div className="content-type-modal__footer">
					<button
						className="content-type-modal__button content-type-modal__button--secondary"
						onClick={onCancel}
					>
						Cancel
					</button>
					<button
						className="content-type-modal__button content-type-modal__button--primary"
						onClick={() => {
							const selectedOption = document.querySelector<HTMLInputElement>(
								'input[name="bulk-action"]:checked'
							);
							const option =
								selectedOption?.value === 'all' ? 'all' : 'new-only';
							onConfirm(option);
						}}
					>
						Continue
					</button>
				</div>
			</div>
		</div>
	);
}