// @vitest-environment jsdom
import { describe, expect, it } from "vitest";
import SelfServeTaskList from "@/components/displays/selfServe/SelfServeTaskList.vue";
import { mountWithApp } from "./helpers/mountWithApp.js";

const BCheckboxStub = {
  props: ["modelValue"],
  emits: ["update:modelValue", "input"],
  template: `
    <button
      type="button"
      data-testid="checkbox-stub"
      @click="$emit('update:modelValue', !modelValue); $emit('input', !modelValue)"
    >
      checkbox
    </button>
  `,
};

describe("SelfServeTaskList", () => {
  it("emits task toggles and attachment downloads", async () => {
    const attachments = [
      { id: 101, content: { other: "instruction.pdf" } },
      { id: 102, content: { other: "mirror.jpg" }, download_link: "https://cdn.example.test/mirror.jpg" },
    ];
    const wrapper = mountWithApp(SelfServeTaskList, {
      props: {
        tasks: [
          {
            id: 5,
            task: "Wash mirrors",
            description: "Use the soft brush",
            services: ["MACHINE"],
            buttons: [1, 2],
            attachments,
          },
        ],
        completedTasks: {
          5: false,
        },
      },
      global: {
        stubs: {
          BCheckbox: BCheckboxStub,
          BField: { template: "<div><slot /></div>" },
          BIcon: { template: "<span><slot /></span>" },
        },
      },
    });

    await wrapper.get('[data-testid="self-serve-task-5-toggle"]').trigger("click");
    await wrapper.get('[data-testid="self-serve-task-5-attachment-101"]').trigger("click");
    await wrapper.get('[data-testid="self-serve-task-5-attachment-102"]').trigger("click");

    expect(wrapper.emitted("toggle-task")).toEqual([
      [5, true],
      [5, true],
    ]);
    expect(wrapper.emitted("download-attachment")).toEqual([
      [5, 101, attachments[0]],
      [5, 102, attachments[1]],
    ]);
    expect(wrapper.text()).not.toContain("MACHINE");
    expect(wrapper.text()).not.toContain("Button 1");
  });

  it("prefixes only program picker task titles with the configured wheel selection", () => {
    const wrapper = mountWithApp(SelfServeTaskList, {
      props: {
        tasks: [
          {
            id: 6,
            task: "Choose program",
            description: "-",
            services: ["PROGRAM_PICKER"],
            buttons: [],
            dynamic_images_vehicle_type: 4,
          },
          {
            id: 7,
            task: "Tryk reset",
            description: "-",
            services: ["MACHINE"],
            buttons: ["reset"],
            dynamic_images_vehicle_type: 7,
          },
          {
            id: 8,
            task: "Manual inspection",
            description: "-",
            services: [],
            buttons: [],
            dynamic_images_vehicle_type: null,
          },
        ],
        completedTasks: {},
      },
      global: {
        stubs: {
          BCheckbox: BCheckboxStub,
          BField: { template: "<div><slot /></div>" },
          BIcon: { template: "<span><slot /></span>" },
        },
      },
    });

    expect(wrapper.get('[data-testid="self-serve-task-6"]').text()).toContain("#4 Choose program");
    expect(wrapper.get('[data-testid="self-serve-task-7"]').text()).toContain("Tryk reset");
    expect(wrapper.get('[data-testid="self-serve-task-7"]').text()).not.toContain("#");
    expect(wrapper.get('[data-testid="self-serve-task-8"]').text()).toContain("Manual inspection");
    expect(wrapper.get('[data-testid="self-serve-task-8"]').text()).not.toContain("#");
  });
});