import { __ } from "@wordpress/i18n";
import HistoryPreview from "./HistoryPreview";
import MarketingOptions from "./MarketingOptions";
import styles from "./ConnectionRequired.module.css";

interface Props {
	connectionLost: boolean;
}

export default function ConnectionRequired({ connectionLost }: Props) {
	const { canConnect, connectionError, connectUrl } =
		window.flexibleChatHistory;
	const isMarketingCard = !canConnect;
	const title = isMarketingCard
		? __("Run chat without running the stack", "flexible-chat")
		: connectionLost
			? __("Connection lost", "flexible-chat")
			: __("Connect Flexible Chat", "flexible-chat");

	return (
		<div className={styles.connectionRequired}>
			<HistoryPreview />
			<div className={styles.connectionCard}>
				{connectionError && (
					<div className="notice notice-error inline">
						<p>{connectionError}</p>
					</div>
				)}
				<h2>{title}</h2>
				{isMarketingCard ? (
					<MarketingOptions />
				) : connectionLost ? (
					<p>
						{__(
							"Reconnect Flexible Chat to continue viewing conversation history.",
							"flexible-chat",
						)}
					</p>
				) : (
					<p>
						{__(
							"Connect your store to Flexible Chat to view conversation history and monitor usage from WordPress.",
							"flexible-chat",
						)}
					</p>
				)}
				{!isMarketingCard && (
					<div className={styles.connectionActions}>
						<a href={connectUrl} className="button button-primary">
							{connectionLost
								? __(
										"Reconnect to Flexible Chat",
										"flexible-chat",
									)
								: __(
										"Connect to Flexible Chat",
										"flexible-chat",
									)}
						</a>
					</div>
				)}
			</div>
		</div>
	);
}