import { mount } from "@vue/test-utils";
import listCard from "./list-card";
import { nextTick } from "vue";
import { GaActions } from "@/constants/analytics";

describe("list-card.vue", () => {
    it("Should return input type checkbox if isMultiSelect is true", () => {
        // Act
        const wrapper = mount(listCard, {
            propsData: {
                isMultiSelect: true,
                buttonLabel: "Windshield",
                buttonID: "List Card Checkbox",
                groupID: "checkbox-demo-1",
                groupName: "Checkbox 1",
                buttonImage: "windshield-damage.svg",
                value: "test value",
            },
        });

        // Assert
        const input = wrapper.find("input");
        expect(input.attributes().type).toEqual("checkbox");
    });

    it("Should return primary label text", () => {
        // Act
        const wrapper = mount(listCard, {
            propsData: {
                isRadioHorizontal: true,
                buttonLabel: "Windshield",
                buttonID: "List Card Checkbox",
                groupID: "radio-demo-1",
                groupName: "radio 1",
                buttonImage: "windshield-damage.svg",
                value: "test value",
            },
        });

        // Assert
        const paragraph = wrapper.find("p");
        expect(paragraph.text()).toEqual("Windshield");
    });

    it("Should return secondary (sub) label text", () => {
        // Act
        const wrapper = mount(listCard, {
            propsData: {
                isRadioHorizontal: true,
                buttonLabel: "Windshield",
                buttonID: "List Card Checkbox",
                groupID: "radio-demo-1",
                groupName: "radio 1",
                buttonImage: "windshield-damage.svg",
                buttonLabelSubCopy: "Test",
                value: "test value",
            },
        });

        // Assert
        const paragraph = wrapper.find("p:nth-of-type(2)");
        expect(paragraph.text()).toEqual("Test");
    });

    it("Should return input group name used for radio or checkbox", () => {
        // Act
        const wrapper = mount(listCard, {
            propsData: {
                isRadioHorizontal: true,
                buttonLabel: "Windshield",
                buttonID: "List Card Checkbox",
                groupID: "radio-demo-1",
                groupName: "radio 1",
                buttonImage: "windshield-damage.svg",
                buttonLabelSubCopy: "Test",
                value: "test value",
            },
        });

        // Assert
        const input = wrapper.find("input");
        expect(input.attributes().name).toEqual("radio 1");
    });

    it("Should return aria-required state", () => {
        // Act
        const wrapper = mount(listCard, {
            propsData: {
                isRadioHorizontal: true,
                buttonLabel: "Windshield",
                buttonID: "List Card Checkbox",
                groupID: "radio-demo-1",
                groupName: "radio 1",
                buttonImage: "windshield-damage.svg",
                isRequired: true,
                value: "test value",
            },
        });

        // Assert
        const input = wrapper.find("input");
        expect(input.attributes()["aria-required"]).toEqual("true");
    });

    it("Should return flex row classes if isWide is true", () => {
        // Act
        const wrapper = mount(listCard, {
            propsData: {
                isRadioHorizontal: true,
                buttonLabel: "Windshield",
                buttonID: "List Card Checkbox",
                groupID: "radio-demo-1",
                groupName: "radio 1",
                buttonImage: "windshield-damage.svg",
                isRequired: true,
                isWide: true,
                buttonLabelSubCopy: "",
                value: "test value",
            },
        });

        // Assert
        const label = wrapper.find(".list-card-content");
        expect(label.exists()).toBe(true);
        const labelClasses = wrapper.vm.labelClasses;
        expect(labelClasses).toContain("flex-row");
        expect(label.classes()).toContain("flex-row");
    });

    it("Should return flex row classes if isWide is true and checkboxTop if buttonLabelSubCopy is provided", () => {
        // Act
        const wrapper = mount(listCard, {
            propsData: {
                isRadioHorizontal: true,
                buttonLabel: "Windshield",
                buttonID: "List Card Checkbox",
                groupID: "radio-demo-1",
                groupName: "radio 1",
                buttonImage: "windshield-damage.svg",
                isRequired: true,
                isWide: true,
                buttonLabelSubCopy: "Button Subcopy",
                value: "test value",
            },
        });

        // Assert
        const label = wrapper.find(".list-card-content");
        expect(label.exists()).toBe(true);
        const labelClasses = wrapper.vm.labelClasses;
        expect(labelClasses).toContain("flex-row");
        expect(label.classes()).toContain("flex-row");
        expect(labelClasses).toContain("checkboxTop");
        expect(label.classes()).toContain("checkboxTop");
    });

    it("Should return flex column classes if isWide is false", () => {
        // Act
        const wrapper = mount(listCard, {
            propsData: {
                isRadioHorizontal: true,
                buttonLabel: "Windshield",
                buttonID: "List Card Checkbox",
                groupID: "radio-demo-1",
                groupName: "radio 1",
                buttonImage: "windshield-damage.svg",
                isRequired: true,
                isWide: false,
                value: "test value",
            },
        });

        // Assert
        const label = wrapper.find(".list-card-content");
        expect(label.exists()).toBe(true);
        const labelClasses = wrapper.vm.labelClasses;
        expect(labelClasses).toContain("flex-column");
        expect(label.classes()).toContain("flex-column");
    });
});
