import { renderToStaticMarkup } from "react-dom/server";
import { describe, expect, it } from "vitest";

import { PaymentMethodSelector } from "../payment-method-selector";

describe("PaymentMethodSelector", () => {
  it("orders the default channel first and renders page analytics", () => {
    const html = renderToStaticMarkup(
      <PaymentMethodSelector
        config={{
          canChoosePaymentMethod: true,
          initialPayChannel: "ezpay",
          showPaymentMethodSelector: true,
        }}
        value="ezpay"
        caption="GCash by default"
        analyticsKey="tip.payment_method"
        onChange={() => undefined}
      />,
    );

    expect(html).toContain('aria-labelledby="payment-method-title"');
    expect(html).toContain("Payment Method");
    expect(html).toContain("GCash by default");
    expect(html.indexOf('aria-label="GCash"')).toBeLessThan(
      html.indexOf('aria-label="Stripe"'),
    );
    const selectedButton = html.match(
      /<button[^>]*aria-pressed="true"[^>]*>/,
    )?.[0];
    expect(selectedButton).toBeDefined();
    expect(selectedButton).toContain(
      'data-analytics-key="tip.payment_method"',
    );
    expect(selectedButton).toContain("border-[#f657a0]");
    expect(selectedButton).not.toContain("border-[rgba(246,87,160,0.18)]");
    expect(selectedButton).toContain("bg-[#fff4f9]");
    expect(selectedButton).not.toContain("bg-white");
    expect(selectedButton).toContain("0_0_0_3px_rgba(217,47,127,0.18)");
    expect(selectedButton).toContain("-translate-y-0.5");
    expect(html).toContain("/images/subscription/gcash-logo.svg");
  });

  it("disables both payment methods while payment is busy", () => {
    const html = renderToStaticMarkup(
      <PaymentMethodSelector
        config={{
          canChoosePaymentMethod: true,
          initialPayChannel: "stripe",
          showPaymentMethodSelector: true,
        }}
        value="stripe"
        disabled
        analyticsKey="subscription.payment_method"
        onChange={() => undefined}
      />,
    );

    expect(html.match(/ disabled=""/g)).toHaveLength(2);
    expect(html).toContain(
      'data-analytics-key="subscription.payment_method"',
    );
  });

  it("labels Indonesia Ezpay as QRIS without the GCash logo", () => {
    const html = renderToStaticMarkup(
      <PaymentMethodSelector
        config={{
          canChoosePaymentMethod: true,
          initialPayChannel: "ezpay",
          showPaymentMethodSelector: true,
          ezpayDisplayName: "QRIS",
        }}
        value="ezpay"
        caption="QRIS by default in Indonesia"
        analyticsKey="subscription.payment_method"
        onChange={() => undefined}
      />,
    );

    expect(html).toContain('aria-label="QRIS"');
    expect(html).toContain("QRIS by default in Indonesia");
    expect(html).not.toContain("gcash-logo.svg");
  });

  it("renders compact controls without the caption", () => {
    const html = renderToStaticMarkup(
      <PaymentMethodSelector
        config={{
          canChoosePaymentMethod: true,
          initialPayChannel: "ezpay",
          showPaymentMethodSelector: true,
        }}
        value="ezpay"
        density="compact"
        caption="This caption is hidden"
        analyticsKey="tip.payment_method"
        onChange={() => undefined}
      />,
    );

    expect(html).toContain('data-density="compact"');
    expect(html).toContain("Payment Method");
    expect(html).not.toContain("This caption is hidden");
    expect(html).toContain("min-h-13");
  });

  it("does not render when payment method selection is unavailable", () => {
    const html = renderToStaticMarkup(
      <PaymentMethodSelector
        config={{
          canChoosePaymentMethod: true,
          initialPayChannel: "stripe",
          showPaymentMethodSelector: false,
        }}
        value="stripe"
        analyticsKey="tip.payment_method"
        onChange={() => undefined}
      />,
    );

    expect(html).toBe("");
  });
});
