import { Model } from "../../../src";
import { CAROUSEL_LAYOUT } from "../../../src/constants";
import {
  addNewChartToCarousel,
  createCarousel,
  selectCarouselItem,
} from "../../test_helpers/commands_helpers";
import { click } from "../../test_helpers/dom_helper";
import { mockChart, mountSpreadsheet, nextTick } from "../../test_helpers/helpers";

mockChart();

let model: Model;
let fixture: HTMLElement;

describe("full screen carousel", () => {
  beforeEach(async () => {
    model = new Model();
    ({ fixture } = await mountSpreadsheet({ model }));
  });

  test("Can make a carousel fullscreen in dashboard", async () => {
    createCarousel(model, { items: [] }, "carouselId");
    addNewChartToCarousel(model, "carouselId");
    await nextTick();
    expect(".o-figure .o-carousel-full-screen-button").toHaveCount(0);

    model.updateMode("dashboard");
    await nextTick();
    expect(".o-figure .o-carousel-full-screen-button").toHaveCount(1);

    expect(".o-fullscreen-figure").toHaveCount(0);
    await click(fixture, ".o-figure .o-carousel-full-screen-button");
    expect(".o-fullscreen-figure").toHaveCount(1);
  });

  test("Can exit fullscreen mode", async () => {
    createCarousel(model, { items: [] }, "carouselId");
    addNewChartToCarousel(model, "carouselId");
    model.updateMode("dashboard");
    await nextTick();
    expect(".o-carousel-full-screen-button").toHaveAttribute("data-icon", "expand_content");

    await click(fixture, ".o-figure .o-carousel-full-screen-button");
    expect(".o-fullscreen-figure").toHaveCount(1);
    expect(".o-fullscreen-figure .o-carousel-full-screen-button").toHaveAttribute(
      "data-icon",
      "close_fullscreen"
    );

    await click(fixture, ".o-fullscreen-figure .o-carousel-full-screen-button");
    expect(".o-fullscreen-figure").toHaveCount(0);
  });

  test("Can use the data view in full screen", async () => {
    createCarousel(model, { items: [{ type: "carouselDataView" }] }, "carouselId");
    addNewChartToCarousel(model, "carouselId", { type: "radar" });
    selectCarouselItem(model, "carouselId", { type: "carouselDataView" });
    model.updateMode("dashboard");
    await nextTick();

    await click(fixture, ".o-figure .o-carousel-full-screen-button");
    expect(".o-fullscreen-figure .o-carousel-tab").toHaveCount(2);
    expect(".o-fullscreen-figure .o-carousel-tab:nth-child(1)").toHaveText("Data");
    expect(".o-fullscreen-figure .o-carousel-tab:nth-child(2)").toHaveText("Radar");
  });

  test("Full screen carousel uses the actual full screen container size for layout", async () => {
    createCarousel(model, { items: [] }, "carouselId");
    addNewChartToCarousel(model, "carouselId");
    model.updateMode("dashboard");
    await nextTick();

    await click(fixture, ".o-figure .o-carousel-full-screen-button");
    const content = fixture.querySelector<HTMLElement>(".o-fullscreen-figure .o-carousel-content");
    expect(content!.style.width).toBe(`${1000 - 2 * CAROUSEL_LAYOUT.paddingX}px`);
    expect(content!.style.height).not.toBe("0px");
  });
});