import { shallowMount } from "@vue/test-utils";
import saveProgressPopupSmsConsentQuestion from "./save-progress-popup-sms-consent-question";
import {
    defaultSaveProgressSmsConsent,
    getSaveProgressSmsConsentFallbackCopy,
} from "@/helpers/save-progress-sms-consent/save-progress-sms-consent-helper";
import { errorMessages } from "@/constants/error-messages";

describe("save-progress-popup-sms-consent-question", () => {
    it("should render two consent checkboxes with default copy", () => {
        const wrapper = shallowMount(saveProgressPopupSmsConsentQuestion);
        const fallbackCopy = getSaveProgressSmsConsentFallbackCopy();

        const checkboxes = wrapper.findAllComponents({ name: "checkboxQuestion" });

        expect(checkboxes).toHaveLength(2);
        expect(checkboxes.at(0).props("labelText")).toBe(fallbackCopy.transactional);
        expect(checkboxes.at(1).props("labelText")).toBe(fallbackCopy.marketing);
    });

    it("should emit updated consent when a checkbox changes", async () => {
        const wrapper = shallowMount(saveProgressPopupSmsConsentQuestion, {
            propsData: {
                modelValue: defaultSaveProgressSmsConsent(),
            },
        });

        wrapper.vm.transactionalConsent = true;
        await wrapper.vm.$nextTick();

        expect(wrapper.emitted("update:modelValue")).toEqual([
            [{ transactional: true, marketing: false }],
        ]);
    });

    it("should accept API-ready consent copy via prop", () => {
        const apiCopy = {
            transactional: "API transactional copy",
            marketing: "API marketing copy",
        };

        const wrapper = shallowMount(saveProgressPopupSmsConsentQuestion, {
            propsData: {
                consentCopy: apiCopy,
            },
        });

        const checkboxes = wrapper.findAllComponents({ name: "checkboxQuestion" });

        expect(checkboxes.at(0).props("labelText")).toBe("API transactional copy");
        expect(checkboxes.at(1).props("labelText")).toBe("API marketing copy");
    });

    it("should disable consent checkboxes when isDisabled is true", () => {
        const wrapper = shallowMount(saveProgressPopupSmsConsentQuestion, {
            propsData: {
                isDisabled: true,
            },
        });

        const checkboxes = wrapper.findAllComponents({ name: "checkboxQuestion" });

        expect(checkboxes.at(0).props("isDisabled")).toBe(true);
        expect(checkboxes.at(1).props("isDisabled")).toBe(true);
        expect(wrapper.find("fieldset").attributes("disabled")).toBe("");
    });

    it("should not show consent errors before showConsentErrors is true", () => {
        const wrapper = shallowMount(saveProgressPopupSmsConsentQuestion, {
            propsData: {
                modelValue: defaultSaveProgressSmsConsent(),
                showConsentErrors: false,
            },
        });

        const checkboxes = wrapper.findAllComponents({ name: "checkboxQuestion" });

        expect(checkboxes.at(0).props("hasError")).toBe(false);
        expect(checkboxes.at(1).props("hasError")).toBe(false);
        expect(wrapper.text()).not.toContain(errorMessages.SMS_CONSENT_REQUIRED);
    });

    it("should show consent errors when showConsentErrors is true and nothing is selected", async () => {
        const wrapper = shallowMount(saveProgressPopupSmsConsentQuestion, {
            propsData: {
                modelValue: defaultSaveProgressSmsConsent(),
                showConsentErrors: false,
            },
        });

        await wrapper.setProps({ showConsentErrors: true });

        expect(wrapper.text()).toContain(errorMessages.SMS_CONSENT_REQUIRED);

        const checkboxes = wrapper.findAllComponents({ name: "checkboxQuestion" });
        expect(checkboxes.at(0).props("hasError")).toBe(true);
        expect(checkboxes.at(1).props("hasError")).toBe(true);
    });

    it("should clear consent errors when a selection is made while showConsentErrors is true", async () => {
        const wrapper = shallowMount(saveProgressPopupSmsConsentQuestion, {
            propsData: {
                modelValue: defaultSaveProgressSmsConsent(),
                showConsentErrors: true,
            },
        });

        await wrapper.setProps({
            modelValue: { transactional: true, marketing: false },
        });

        const checkboxes = wrapper.findAllComponents({ name: "checkboxQuestion" });
        expect(checkboxes.at(0).props("hasError")).toBe(false);
        expect(checkboxes.at(1).props("hasError")).toBe(false);
    });
});