import React from "react";
import { PaymentOptionItem } from "./components/PaymentOptionItem.tsx";
import { ChannelFromServer } from "./types/models/ChannelFromServer";
import { ChannelsFromServerFactory } from "./types/factories/ChannelsFromServerFactory";
import { ProviderFooter } from "./components/ProviderFooter";
import { getPaymentMethodData } from "@woocommerce/settings";
import { Provider } from './types/models/Provider';

const data = getPaymentMethodData("simplyin", {});

interface RendererState {
	items: ChannelFromServer[];
	isLoading: boolean;
	selectedProvider: Provider | null;
}

export class Renderer extends React.Component<{}, RendererState> {
	constructor(props: {}) {
		super(props);
		this.state = {
			items: [],
			isLoading: false,
			selectedProvider: null,
		};
	}
	private onProviderSelected = (event: Event) => {
		this.setState({ selectedProvider: (event as CustomEvent<Provider | null>).detail });
	};

	componentDidMount() {
		window.addEventListener('simplyin-provider-selected', this.onProviderSelected);
		window.addEventListener('simplyin-login-state-changed', this.onLoginStateChanged);
		this.setupPaymentMethodsCallback();

		if ((window as any).SimplyIn?.getBlocksPaymentMethods) {
			this.triggerPaymentMethodsUpdate();
			return;
		}

		(window as any).SimplyInReadyCallback = () => {
			this.triggerPaymentMethodsUpdate();
		};
	}
	componentWillUnmount() {
		window.removeEventListener('simplyin-provider-selected', this.onProviderSelected);
		window.removeEventListener('simplyin-login-state-changed', this.onLoginStateChanged);
	}
	private onLoginStateChanged = () => this.publishMarks(this.state.items);
	private publishMarks(items: ChannelFromServer[]) {
		const visible = items.filter((channel) => !(channel.data as any)?.isCard || !!(window as any).SimplyIn?.is_login);
		const providers = Array.from(new Map(visible.filter((item) => item.provider).map((item) => [item.provider!.id, item.provider!])).values());
		(window as any).simplyinProviderMarks = providers;
		window.dispatchEvent(new window.CustomEvent('simplyin-provider-marks', { detail: providers }));
	}

	private setupPaymentMethodsCallback = () => {
		(window as any).SimplyinPaymentMethodsCallback =
			this.handlePaymentMethodsUpdate;
	};

	private handlePaymentMethodsUpdate = (paymentMethodsFromServer: any[]) => {
		try {
			const selectedMethodId = (document.querySelector('.simplyin-block-payment input[type="radio"]:checked') as HTMLInputElement | null)?.value;
			const processedChannels =
				ChannelsFromServerFactory.createChannelsFromServer(
					paymentMethodsFromServer,
				);
			this.publishMarks(processedChannels.items);
			const selectedMethod = processedChannels.items.find((channel: ChannelFromServer) => channel.value === selectedMethodId);

			this.setState(
				{
					items: processedChannels.items as ChannelFromServer[],
					isLoading: false,
					selectedProvider: selectedMethod?.provider || null,
				},
				() => {
					if ((window as any).SimplyIn?.validatePhoneNumber) {
						(window as any).SimplyIn.validatePhoneNumber();
					}
				},
			);
		} catch (error) {
			(window as any).simplyinProviderMarks = [];
			window.dispatchEvent(new window.CustomEvent('simplyin-provider-marks', { detail: [] }));
			this.setState({
				items: [],
				isLoading: false,
				selectedProvider: null,
			});
		}
	};

	public triggerPaymentMethodsUpdate = () => {
		this.setState({ isLoading: true });

		if ((window as any).SimplyIn?.getBlocksPaymentMethods) {
			(window as any).SimplyIn.getBlocksPaymentMethods();
		} else {
			this.setState({ isLoading: false });
		}
	};

	render() {
		const { items, selectedProvider } = this.state;
		const paymentData = data as any;
		const environmentTestNotice = paymentData?.environment_test_notice;
		const notice = environmentTestNotice && (
			<div className="simplyin-environment-test-notice">
				<strong>Simply.IN:</strong> {environmentTestNotice}
			</div>
		);
		// Independent signal from environmentTestNotice above — the payment provider's OWN
		// sandbox flag, not this plugin's Test/Production environment. Never conflated into the
		// same message, even though both can render back to back.
		const providerSandboxNotice = selectedProvider?.is_sandbox ? paymentData?.provider_sandbox_notice : '';
		const sandboxNotice = providerSandboxNotice && (
			<div className="simplyin-provider-sandbox-notice">
				<strong>Simply.IN:</strong> {providerSandboxNotice}
			</div>
		);
		const notices = (
			<>
				{notice}
				{sandboxNotice}
			</>
		);

		if (!items || items.length === 0) {
			return notices;
		}

		return (
			<>
				{notices}
				<ul className={"simplyin-block-payment"}>
					{items.map((channel: ChannelFromServer, index: number) => (
						<PaymentOptionItem
							key={channel.key}
							simplyinOptionId={channel.simplyinOptionId}
							id={channel.key}
							value={channel.value}
							name={channel.name}
							label={channel.label}
							icon={channel.icon}
							items={channel.items}
							description={channel.description}
							data={channel.data}
							provider={channel.provider}
							hasParent={false}
						/>
					))}
				</ul>
				{selectedProvider && !selectedProvider.regulations_url && !selectedProvider.gdpr_url && <div className="simplyin-payment-provider-detail" aria-live="polite">{selectedProvider.name}</div>}
				{selectedProvider && paymentData?.messages?.provider && (
						<ProviderFooter
							providerData={selectedProvider}
							messages={paymentData.messages}
						/>
					)}
			</>
		);
	}
}