import { getSetting } from "@woocommerce/settings";
import { decodeEntities } from "@wordpress/html-entities";
import { __ } from "@wordpress/i18n";
import { registerPaymentMethod } from "@woocommerce/blocks-registry";
// import { useSibsCheckout } from "../hooks/useSibsCheckout";

const METHOD = "sibs_stg_pblkv";
const SETTINGS_KEY = `${METHOD}_data`;

const data = getSetting(SETTINGS_KEY) || {};
// const checkoutEndpoint = data?.checkoutEndpoint;

const Label = () => {
	const title = decodeEntities(data?.title ?? "");
	const logos = data?.logos ?? [];

	return (
		<div className="wc-block-components-payment-method-label wc-block-components-payment-method-label--with-icon">
			{logos.map((url, index) => (
				<img
					key={index}
					src={url}
					alt=""
					style={{ display: "inline", paddingRight: "5px" }}
				/>
			))}
			<span>{title}</span>
		</div>
	);
};

const Content = ({ eventRegistration, emitResponse }) => {
	const description = decodeEntities(data?.description ?? "");

	/*useSibsCheckout({
		method: METHOD,
		endpoint: checkoutEndpoint,
		eventRegistration,
		emitResponse,
		data,
		enabled: true,
	});*/

	return <span>{description}</span>;
};

registerPaymentMethod({
	name: METHOD,
	label: <Label />,
	ariaLabel: __("SIBS payment method", data?.translation),
	canMakePayment: () => true,
	content: <Content />,
	edit: <Content />,
	supports: {
		features: data?.supports ?? [],
	},
});