import { Model } from "../../../src";
import { CHART_PADDING_TOP } from "../../../src/constants";
import { createChart, updateChart } from "../../test_helpers/commands_helpers";
import { click, getElStyle, triggerMouseEvent } from "../../test_helpers/dom_helper";
import { mockChart, mountSpreadsheet, nextTick } from "../../test_helpers/helpers";
import { extendMockGetBoundingClientRect } from "../../test_helpers/mock_helpers";

mockChart();

let model: Model;
const chartId = "someuuid";

describe("chart menu for dashboard", () => {
  beforeEach(async () => {
    model = new Model();
  });

  test.each(["bar", "line", "pie"] as const)(
    "%s charts have more top padding in dashboard mode if there is no title/legend",
    (chartType) => {
      createChart(model, { type: chartType, legendPosition: "none", title: { text: "" } }, chartId);
      model.updateMode("dashboard");

      let runtime = model.getters.getChartRuntime(chartId) as any;
      expect(runtime.chartJsConfig.options?.layout?.padding?.top).toBe(30);

      updateChart(model, chartId, { title: { text: "some title" } });
      runtime = model.getters.getChartRuntime(chartId) as any;
      expect(runtime.chartJsConfig.options?.layout?.padding?.top).toBe(CHART_PADDING_TOP);

      updateChart(model, chartId, { legendPosition: "top", title: { text: "" } });
      runtime = model.getters.getChartRuntime(chartId) as any;
      expect(runtime.chartJsConfig.options?.layout?.padding?.top).toBe(CHART_PADDING_TOP);
    }
  );

  test("Can open menu to copy/download chart in dashboard mode", async () => {
    extendMockGetBoundingClientRect({
      "o-chart-menu-item": () => ({ x: 100, y: 100, width: 20, height: 20 }),
    });
    createChart(model, { type: "bar" }, chartId);
    model.updateMode("dashboard");
    const { fixture } = await mountSpreadsheet({ model });

    triggerMouseEvent(".o-figure", "contextmenu");
    await nextTick();
    expect(".o-menu-item").toHaveCount(0);

    await click(fixture, ".o-figure [data-icon='more_vert']");
    expect(getElStyle(".o-popover", "top")).toBe("120px");
    expect(getElStyle(".o-popover", "left")).toBe("100px");
    const menuItems = [...document.querySelectorAll<HTMLElement>(".o-menu-item")].map(
      (item) => item.dataset.name
    );

    expect(menuItems).toEqual(["copy_as_image", "download"]);
  });
});