import { render } from "@testing-library/react";

import { Countdown } from "../Countdown";

describe("rendering Countdown", () => {
  it("has default class countdown", () => {
    const { getByTestId } = render(
      <Countdown data-testid="test-id" targetDate="2027-01-01T00:00:00.000Z" />,
    );

    expect(getByTestId("test-id")).toHaveClass("countdown");
  });

  it("has additional class when className is set", () => {
    const { getByTestId } = render(
      <Countdown
        data-testid="test-id"
        targetDate="2027-01-01T00:00:00.000Z"
        className="test-class"
      />,
    );

    expect(getByTestId("test-id")).toHaveClass("countdown");
    expect(getByTestId("test-id")).toHaveClass("test-class");
  });

  it("renders selected units only", () => {
    const { container } = render(
      <Countdown
        targetDate="2027-01-01T00:00:00.000Z"
        units={["days", "hours"]}
      />,
    );

    const labels = Array.from(
      container.querySelectorAll(".countdown__label"),
    ).map((element) => element.textContent);

    expect(container.querySelectorAll(".countdown__unit")).toHaveLength(2);
    expect(labels).toEqual(["dni", "hod"]);
  });

  it("renders custom labels", () => {
    const { getByText } = render(
      <Countdown
        targetDate="2027-01-01T00:00:00.000Z"
        units={["days", "hours", "seconds"]}
        labels={{
          days: { many: "days", few: "days", one: "day" },
          hours: "hrs",
          seconds: "sec",
        }}
      />,
    );

    expect(getByText("days")).toBeInTheDocument();
    expect(getByText("hrs")).toBeInTheDocument();
    expect(getByText("sec")).toBeInTheDocument();
  });

  it("renders root-level data attributes for vanilla use", () => {
    const { getByTestId } = render(
      <Countdown
        data-testid="test-id"
        targetDate="2027-01-01T00:00:00.000Z"
        units={["days", "hours"]}
        labels={{ days: { many: "dni", few: "dni", one: "deň" }, hours: "hod" }}
      />,
    );

    expect(getByTestId("test-id")).toHaveAttribute("data-countdown", "true");
    expect(
      JSON.parse(getByTestId("test-id").getAttribute("data-countdown-config")),
    ).toEqual({
      targetDate: "2027-01-01T00:00:00.000Z",
      units: ["days", "hours"],
      labels: { days: { many: "dni", few: "dni", one: "deň" }, hours: "hod" },
    });
  });

  it("normalizes duplicate and out-of-order units", () => {
    const { container, getByTestId } = render(
      <Countdown
        data-testid="test-id"
        targetDate="2027-01-01T00:00:00.000Z"
        units={["seconds", "days", "seconds", "hours"]}
      />,
    );

    const labels = Array.from(
      container.querySelectorAll(".countdown__label"),
    ).map((element) => element.textContent);

    expect(labels).toEqual(["dni", "hod", "sek"]);
    expect(
      JSON.parse(getByTestId("test-id").getAttribute("data-countdown-config")),
    ).toMatchObject({
      units: ["days", "hours", "seconds"],
    });
  });
});