import { registerPaymentMethod } from "@woocommerce/blocks-registry";
import { useEffect } from "react";
import { decodeEntities } from "@wordpress/html-entities";
import { getSetting } from "@woocommerce/settings";
import { __ } from "@wordpress/i18n";
import { GatewayDescription } from "../../components/GatewayDescription";

const name = "wc-koin-pix";
const settings = getSetting(`${name}_data`, {});
const defaultLabel = __("Pix - Koin", "wc-koin-official");

const label = decodeEntities(settings.title) || defaultLabel;
const sandbox = decodeEntities(settings.sandbox || "");
const description = decodeEntities(settings.description || "");
const allowedCountries = decodeEntities(settings.countries || []);
const icon = decodeEntities(settings.icon || "");

const Content = (props) => {
  return (
    <>
      <GatewayDescription sandbox={sandbox} description={description} />
    </>
  );
};

const Label = (props) => {
  return (
    <span
      style={{
        width: "100%",
        display: "flex",
        alignItems: "center",
        gap: "8px",
      }}
    >
      {label}
      {icon && <img src={icon} alt="Koin" style={{ height: "24px" }} />}
    </span>
  );
};

const Pix = {
  name: name,
  label: <Label />,
  content: <Content />,
  edit: <Content />,
  canMakePayment: (args) => args.billingAddress.country === "BR",
  ariaLabel: label,
  supports: {
    features: settings.supports,
  },
};

registerPaymentMethod(Pix);
