import { registerPaymentMethod } from "@woocommerce/blocks-registry";
import { decodeEntities } from "@wordpress/html-entities";
import { getSetting } from "@woocommerce/settings";

const settings = getSetting("bobpay_data", {});
const creditCardSettings = getSetting("bobpay_credit_card_data", {});
const scanToPaySettings = getSetting("bobpay_scan_to_pay_data", {});
const payShapSettings = getSetting("bobpay_pay_shap_data", {});
const capitecPaySettings = getSetting("bobpay_capitec_pay_data", {});
const instantEFTSettings = getSetting("bobpay_instant_eft_data", {});
const manualEFTSettings = getSetting("bobpay_manual_eft_data", {});
const nedbankDirectEFTSettings = getSetting("bobpay_nedbank_direct_eft_data", {});
const absaPaySettings = getSetting("bobpay_absa_pay_data", {});
const applePaySettings = getSetting("bobpay_apple_pay_data", {});
const googlePaySettings = getSetting("bobpay_google_pay_data", {});
const defaultLabel = "Bob Pay";
const label = decodeEntities(settings.title) || defaultLabel;
const Content = () => {
	return decodeEntities(settings.description || "");
};

const BobPayEFTLabel = () => {
	return (
		<span
			style={{
				display: "inline-flex",
				width: "80%",
				gridGap: "3px",
				alignItems: "center",
				flexWrap: "wrap",
			}}
		>
			{settings.title}&nbsp;
			<img style={{ height: "20px" }} src={settings.instant_eft_url} />
			<img style={{ height: "20px" }} src={settings.manual_eft_url} />
		</span>
	);
};
const BobPayEFT = {
	name: "bobpay_eft",
	label: <BobPayEFTLabel />,
	content: <Content />,
	edit: <Content />,
	canMakePayment: () => true,
	ariaLabel: label,
	supports: {
		features: settings.supports,
	},
};
registerPaymentMethod(BobPayEFT);

const BobPayCreditCardLabel = () => {
	return (
		<span
			style={{
				display: "inline-flex",
				width: "80%",
				gridGap: "3px",
				alignItems: "center",
				flexWrap: "wrap",
			}}
		>
			{creditCardSettings.title}&nbsp;
			<img style={{ height: "15px" }} src={creditCardSettings.visa_url} />
			<img
				style={{ height: "20px" }}
				src={creditCardSettings.mastercard_url}
			/>
		</span>
	);
};
const BobPayCreditCard = {
	name: "bobpay_credit_card",
	label: <BobPayCreditCardLabel />,
	content: <Content />,
	edit: <Content />,
	canMakePayment: () => true,
	ariaLabel: label,
	supports: {
		features: settings.supports,
	},
};
registerPaymentMethod(BobPayCreditCard);

const BobPayScanToPayLabel = () => {
	return (
		<span
			style={{
				display: "inline-flex",
				width: "80%",
				gridGap: "3px",
				alignItems: "center",
				flexWrap: "wrap",
			}}
		>
			{scanToPaySettings.title}&nbsp;
			<img
				style={{ height: "20px" }}
				src={scanToPaySettings.scan_to_pay_url}
			/>
		</span>
	);
};
const BobPayScanToPay = {
	name: "bobpay_scan_to_pay",
	label: <BobPayScanToPayLabel />,
	content: <Content />,
	edit: <Content />,
	canMakePayment: () => true,
	ariaLabel: label,
	supports: {
		features: scanToPaySettings.supports,
	},
};
registerPaymentMethod(BobPayScanToPay);

const BobPayPayShapLabel = () => {
	return (
		<span
			style={{
				display: "inline-flex",
				width: "80%",
				gridGap: "3px",
				alignItems: "center",
				flexWrap: "wrap",
			}}
		>
			{payShapSettings.title}&nbsp;
			<img
				style={{ height: "20px" }}
				src={payShapSettings.pay_shap_url}
			/>
		</span>
	);
};
const BobPayPayShap = {
	name: "bobpay_pay_shap",
	label: <BobPayPayShapLabel />,
	content: <Content />,
	edit: <Content />,
	canMakePayment: () => true,
	ariaLabel: label,
	supports: {
		features: payShapSettings.supports,
	},
};
registerPaymentMethod(BobPayPayShap);

const BobPayCapitecPayLabel = () => {
	return (
		<span
			style={{
				display: "inline-flex",
				width: "80%",
				gridGap: "3px",
				alignItems: "center",
				flexWrap: "wrap",
			}}
		>
			{capitecPaySettings.title}&nbsp;
			<img
				style={{ height: "20px" }}
				src={capitecPaySettings.capitec_pay_url}
			/>
		</span>
	);
};
const BobPayCapitecPay = {
	name: "bobpay_capitec_pay",
	label: <BobPayCapitecPayLabel />,
	content: <Content />,
	edit: <Content />,
	canMakePayment: () => true,
	ariaLabel: label,
	supports: {
		features: capitecPaySettings.supports,
	},
};
registerPaymentMethod(BobPayCapitecPay);

const BobPayInstantEFTLabel = () => {
	return (
		<span
			style={{
				display: "inline-flex",
				width: "80%",
				gridGap: "3px",
				alignItems: "center",
				flexWrap: "wrap",
			}}
		>
			{instantEFTSettings.title}&nbsp;
			<img
				style={{ height: "20px", margin: 0 }}
				src={instantEFTSettings.instant_eft_url}
			/>

		</span>
	);
};
const BobPayInstantEFT = {
	name: "bobpay_instant_eft",
	label: <BobPayInstantEFTLabel />,
	content: <Content />,
	edit: <Content />,
	canMakePayment: () => true,
	ariaLabel: label,
	supports: {
		features: instantEFTSettings.supports,
	},
};
registerPaymentMethod(BobPayInstantEFT);

const BobPayManualEFTLabel = () => {
	return (
		<span
			style={{
				display: "inline-flex",
				width: "80%",
				gridGap: "3px",
				alignItems: "center",
				flexWrap: "wrap",
			}}
		>
			{manualEFTSettings.title}&nbsp;
			<img
				style={{ height: "20px", margin: 0 }}
				src={manualEFTSettings.manual_eft_url}
			/>
		</span>
	);
};
const BobPayManualEFT = {
	name: "bobpay_manual_eft",
	label: <BobPayManualEFTLabel />,
	content: <Content />,
	edit: <Content />,
	canMakePayment: () => true,
	ariaLabel: label,
	supports: {
		features: manualEFTSettings.supports,
	},
};
registerPaymentMethod(BobPayManualEFT);

const BobPayNedbankDirectEFTLabel = () => {
	return (
		<span
			style={{
				display: "inline-flex",
				width: "80%",
				gridGap: "3px",
				alignItems: "center",
				flexWrap: "wrap",
			}}
		>
			{nedbankDirectEFTSettings.title}&nbsp;
			<img
				style={{ height: "20px" }}
				src={nedbankDirectEFTSettings.nedbank_direct_eft_url}
			/>
		</span>
	);
};
const BobPayNedbankDirectEFT = {
	name: "bobpay_nedbank_direct_eft",
	label: <BobPayNedbankDirectEFTLabel />,
	content: <Content />,
	edit: <Content />,
	canMakePayment: () => true,
	ariaLabel: label,
	supports: {
		features: nedbankDirectEFTSettings.supports,
	},
};
registerPaymentMethod(BobPayNedbankDirectEFT);

const BobPayAbsaPayLabel = () => {
	return (
		<span
			style={{
				display: "inline-flex",
				width: "80%",
				gridGap: "3px",
				alignItems: "center",
				flexWrap: "wrap",
			}}
		>
			{absaPaySettings.title}&nbsp;
			<img
				style={{ height: "20px" }}
				src={absaPaySettings.absa_pay_url}
			/>
		</span>
	);
};
const BobPayAbsaPay = {
	name: "bobpay_absa_pay",
	label: <BobPayAbsaPayLabel />,
	content: <Content />,
	edit: <Content />,
	canMakePayment: () => true,
	ariaLabel: label,
	supports: {
		features: absaPaySettings.supports,
	},
};
registerPaymentMethod(BobPayAbsaPay);

const BobPayApplePayLabel = () => {
	return (
		<span
			style={{
				display: "inline-flex",
				width: "80%",
				gridGap: "3px",
				alignItems: "center",
				flexWrap: "wrap",
			}}
		>
			{applePaySettings.title}&nbsp;
			<img
				style={{ height: "20px" }}
				src={applePaySettings.apple_pay_url}
			/>
		</span>
	);
};
const BobPayApplePay = {
	name: "bobpay_apple_pay",
	label: <BobPayApplePayLabel />,
	content: <Content />,
	edit: <Content />,
	canMakePayment: () => true,
	ariaLabel: label,
	supports: {
		features: applePaySettings.supports,
	},
};
registerPaymentMethod(BobPayApplePay);

const BobPayGooglePayLabel = () => {
	return (
		<span
			style={{
				display: "inline-flex",
				width: "80%",
				gridGap: "3px",
				alignItems: "center",
				flexWrap: "wrap",
			}}
		>
			{googlePaySettings.title}&nbsp;
			<img
				style={{ height: "20px" }}
				src={googlePaySettings.google_pay_url}
			/>
		</span>
	);
};
const BobPayGooglePay = {
	name: "bobpay_google_pay",
	label: <BobPayGooglePayLabel />,
	content: <Content />,
	edit: <Content />,
	canMakePayment: () => true,
	ariaLabel: label,
	supports: {
		features: googlePaySettings.supports,
	},
};
registerPaymentMethod(BobPayGooglePay);

const BobPayLabel = () => {
		return (
		<span
			style={{
				display: "inline-flex",
				width: "80%",
				gridGap: "3px",
				alignItems: "center",
				flexWrap: "wrap",
			}}
		>
			{settings.title}&nbsp;
			<img style={{ height: "15px"}} src={settings.visa_url} />
			<img style={{ height: "20px", margin: "0 3px" }} src={settings.mastercard_url} />
			<img style={{ height: "50px", margin: "0 3px" }} src={settings.apple_pay_url} />
			<img style={{ height: "50px", margin: "0 3px" }} src={settings.google_pay_url} />
			<img style={{ height: "20px", margin: "0 3px",transform: "translateY(-4px)" }} src={settings.pay_shap_url} />
			<img style={{ height: "20px", margin: "0 3px",transform: "translateY(-4px)" }} src={settings.instant_eft_url} />
			<img style={{ height: "20px", margin: "0 3px",transform: "translateY(-4px)" }} src={settings.manual_eft_url} />
		</span>
	);
};
const BobPay = {
	name: "bobpay",
	label: <BobPayLabel />,
	content: <Content />,
	edit: <Content />,
	canMakePayment: () => true,
	ariaLabel: label,
	supports: {
		features: settings.supports,
	},
};
registerPaymentMethod(BobPay);
