/**
 * Unit tests for DayIndicators: rounding is position-based (first / last segment),
 * not by indicator type, so one or multiple segments form one pill.
 */

import { describe, it, expect } from "vitest";
import { render } from "@testing-library/react";
import { DayIndicators } from "./DayIndicators";

const baseProps = {
  dutyCount: 0,
  unavailableCount: 0,
  vacationCount: 0,
  hasEvents: false,
};

describe("DayIndicators", () => {
  it("renders nothing when no indicators", () => {
    const { container } = render(<DayIndicators {...baseProps} />);
    expect(container.firstChild).toBeNull();
  });

  it("renders one segment as pill (e.g. vacation only)", () => {
    const { container } = render(
      <DayIndicators {...baseProps} vacationCount={1} />
    );
    const wrapper = container.querySelector("[aria-hidden]");
    expect(wrapper).toBeInTheDocument();
    expect(wrapper?.className).toContain("[&>:first-child]:rounded-l-[3px]");
    expect(wrapper?.className).toContain("[&>:last-child]:rounded-r-[3px]");
    const spans = wrapper?.querySelectorAll("span");
    expect(spans).toHaveLength(1);
  });

  it("renders two segments with positional rounding (duty + vacation)", () => {
    const { container } = render(
      <DayIndicators {...baseProps} dutyCount={1} vacationCount={1} />
    );
    const wrapper = container.querySelector("[aria-hidden]");
    expect(wrapper).toBeInTheDocument();
    expect(wrapper?.className).toContain(
      "[&>:first-child]:rounded-l-[3px]"
    );
    expect(wrapper?.className).toContain(
      "[&>:last-child]:rounded-r-[3px]"
    );
    const spans = wrapper?.querySelectorAll("span");
    expect(spans).toHaveLength(2);
  });

  it("renders three segments with first left-rounded, last right-rounded (duty + unavailable + vacation)", () => {
    const { container } = render(
      <DayIndicators
        {...baseProps}
        dutyCount={1}
        unavailableCount={1}
        vacationCount={1}
      />
    );
    const wrapper = container.querySelector("[aria-hidden]");
    expect(wrapper).toBeInTheDocument();
    expect(wrapper?.className).toContain(
      "[&>:first-child]:rounded-l-[3px]"
    );
    expect(wrapper?.className).toContain(
      "[&>:last-child]:rounded-r-[3px]"
    );
    const spans = wrapper?.querySelectorAll("span");
    expect(spans).toHaveLength(3);
  });
});