import { shallowMount, mount } from "@vue/test-utils";
import toolTip from "@/ux-components/tool-tip/tool-tip.vue";

const mockMixin = {
    methods: {
        getCmsContent: jest.fn(() => "Mock CMS Content"),
    },
};

function setupMocks(mountOptionsMockData = {}) {
    const defaultMountOptions = {
        propsData: {
            cmsWidgetName: "testWidget",
        },
        mixins: [mockMixin],
    };
    return { ...defaultMountOptions, ...mountOptionsMockData };
}

describe("toolTip.vue", () => {
    afterEach(() => {
        jest.clearAllMocks();
    });

    it("should not show tooltip initially", () => {
        // Arrange
        const wrapper = shallowMount(toolTip, setupMocks());

        // Assert
        expect(wrapper.vm.isVisible).toBe(false);
        expect(wrapper.find(".tooltip").exists()).toBe(false);
    });

    it("should show tooltip when icon is clicked", async () => {
        // Arrange
        const wrapper = shallowMount(toolTip, setupMocks());
        const icon = wrapper.find(".tooltip-icon");

        // Act
        await icon.trigger("click");

        // Assert
        expect(wrapper.vm.isVisible).toBe(true);
        expect(wrapper.find(".tooltip").exists()).toBe(true);
    });

    it("should hide tooltip when clicked outside", async () => {
        // Arrange
        const wrapper = shallowMount(toolTip, setupMocks());
        const icon = wrapper.find(".tooltip-icon");

        // Show tooltip first
        await icon.trigger("click");
        expect(wrapper.vm.isVisible).toBe(true);

        // Act - simulate click outside
        const clickEvent = new Event("click");
        Object.defineProperty(clickEvent, "target", { value: document.body });
        document.dispatchEvent(clickEvent);

        // Wait for next tick to allow event handling
        await wrapper.vm.$nextTick();

        // Assert
        expect(wrapper.vm.isVisible).toBe(false);
        expect(wrapper.find(".tooltip").exists()).toBe(false);
    });

    it("should toggle tooltip visibility when icon is clicked multiple times", async () => {
        // Arrange
        const wrapper = shallowMount(toolTip, setupMocks());
        const icon = wrapper.find(".tooltip-icon");

        // Act & Assert - First click shows
        await icon.trigger("click");
        expect(wrapper.vm.isVisible).toBe(true);

        // Second click hides
        await icon.trigger("click");
        expect(wrapper.vm.isVisible).toBe(false);

        // Third click shows again
        await icon.trigger("click");
        expect(wrapper.vm.isVisible).toBe(true);
    });

    it("should not hide tooltip when clicking inside the tooltip container", async () => {
        // Arrange
        const wrapper = shallowMount(toolTip, setupMocks());
        const icon = wrapper.find(".tooltip-icon");

        // Show tooltip first
        await icon.trigger("click");
        expect(wrapper.vm.isVisible).toBe(true);

        // Act - simulate click inside container
        const container = wrapper.find(".tooltip-container").element;
        const clickEvent = new Event("click");
        Object.defineProperty(clickEvent, "target", { value: container });
        document.dispatchEvent(clickEvent);

        // Wait for next tick
        await wrapper.vm.$nextTick();

        // Assert - tooltip should still be visible
        expect(wrapper.vm.isVisible).toBe(true);
    });

    it("should calculate tooltipHorizontalOffset based on parent element width", () => {
        // Arrange
        const wrapper = mount(toolTip, setupMocks());
        const parentDiv = document.createElement("div");
        Object.defineProperty(parentDiv, "offsetWidth", { value: 300, writable: true });

        const container = wrapper.vm.$refs.container;
        Object.defineProperty(container, "parentElement", { value: parentDiv, writable: true });

        // Act & Assert
        expect(wrapper.vm.tooltipHorizontalOffset).toBe(-290);
    });
});