/* eslint-disable unicorn/string-content */
import { describe, expect, it } from "vitest";

import { getClassName } from "../index";

import { getBuild } from "./utils";

describe("merges with existing className attribute", () => {
  const compileESBuild = getBuild("merge");

  it("string literal", async () => {
    const { files } = await compileESBuild({
      clsx: "emotion",
      expectFiles: 2,
      javascript: /* tsx */ `
        export function Hello() {
          return (
            <div className="text-center" css="text-center">
              Hello, world!
            </div>
          );
        }
    `,
    });

    const clsName = getClassName("text-center");
    expect(files.js.text).toContain(`className: "text-center ${clsName}"`);
    expect(files.css.text).toMatch(`.${clsName} {\n  text-align: center;\n}`);
  });

  it("existing function", async () => {
    const { files } = await compileESBuild({
      clsx: "emotion",
      expectFiles: 2,
      javascript: /* tsx */ `
        export function Hello() {
          return (
            <div className={({ isEntering }) => isEntering ? "enter" : "exit"} css="text-center">
              Hello, world!
            </div>
          );
        }
      `,
    });

    const clsName = getClassName("text-center");
    expect(files.js.text).toContain(
      `className: ({\n    isEntering\n  }) => _cx("${clsName}", isEntering ? "enter" : "exit")`
    );
    expect(files.css.text).toMatch(`.${clsName} {\n  text-align: center;\n}`);
  });

  it("supports composeRenderProps", async () => {
    const { files } = await compileESBuild({
      clsx: "clsx",
      expectFiles: 2,
      composeRenderProps: true,
      javascript: /* tsx */ `
        export function Hello(props) {
          return (
            <div {...props} css="text-center">
              Hello, world!
            </div>
          );
        }
      `,
    });

    const clsName = getClassName("text-center");
    expect(files.js.text).toContain(
      `{ ...props, className: _composeClassName("${clsName}", _className),`
    );
  });

  it("supports composeRenderProps (2)", async () => {
    const { files } = await compileESBuild({
      clsx: "clsx",
      expectFiles: 2,
      composeRenderProps: true,
      javascript: /* tsx */ `
        export function Hello({ className, ...props }) {
          return (
            <div className={className} css="text-center">
              <span {...props}>Hello, world!</span>
            </div>
          );
        }
      `,
    });

    const clsName = getClassName("text-center");
    expect(files.js.text).toContain(
      `{ className: _composeClassName("${clsName}", className),`
    );
  });

  it("reuses clsx in scope", async () => {
    const { files } = await compileESBuild({
      clsx: "clsx",
      expectFiles: 2,
      javascript: /* tsx */ `
        import { clsx } from "clsx";

        export function Hello(className) {
          return (
            <div className={clsx("font-semibold", className)} css="text-center" />
          );
        }
      `,
    });

    expect([...files.js.text.match(/from "clsx"/g)!]).toHaveLength(1);
    expect(files.js.text).toContain(
      '{ className: clsx("tw-gqn2k6", "font-semibold", className)'
    );
  });

  it("does not reuse invalid clsx", async () => {
    const { files } = await compileESBuild({
      clsx: "clsx",
      expectFiles: 2,
      javascript: /* tsx */ `
        import { clsx } from "clsx";

        export function Hello(className) {
          let clsx = () => {};
          return (
            <div className={clsx("font-semibold", className)} css="text-center" />
          );
        }
      `,
    });

    expect(files.js.text).toContain(
      'className: _cx("tw-gqn2k6", clsx("font-semibold", className))'
    );
  });
});