import { shallowMount, mount } from "@vue/test-utils";
import CustomerDetails from "./customer-details.vue";
import TechNotes from "./tech-notes/tech-notes.vue";
import TextboxQuestion from "@/digital-components/textbox-question/textbox-question.vue";
import PhoneNumberQuestion from "@/digital-components/phone-number-question/phone-number-question.vue";
import CheckboxQuestion from "@/digital-components/checkbox-question/checkbox-question.vue";
import TextBlock from "@/digital-components/text-block/text-block.vue";
import FunnelHeader from "@/fmg-components/funnel-header/funnel-header.vue";
import FunnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header.vue";
import Navbar from "@/fmg-components/nav-bar/nav-bar.vue";

const mockMixin = {
    methods: {
        getCmsContent() {
            return "Mocked CMS Content";
        },
    },
};

const mockStoreActions = {
    SAVE_CUSTOMER_DETAILS: "SAVE_CUSTOMER_DETAILS",
    SAVE_SERVICE_LOCATION_TECH_NOTES: "SAVE_SERVICE_LOCATION_TECH_NOTES",
    SAVE_PAYMENT_METHOD_CHOICE: "SAVE_PAYMENT_METHOD_CHOICE",
};

describe("CustomerDetails.vue", () => {
    let wrapper;

    beforeEach(() => {
        wrapper = mount(CustomerDetails, {
            global: {
                components: {
                    TechNotes,
                    TextboxQuestion,
                    PhoneNumberQuestion,
                    CheckboxQuestion,
                    TextBlock,
                    FunnelHeader,
                    FunnelSubHeader,
                    Navbar,
                },
                mixins: [mockMixin],
                mocks: {
                    storeActions: mockStoreActions,
                },
            },
            data() {
                return {
                    firstName: "John",
                    lastName: "Doe",
                    emailAddress: "john.doe@example.com",
                    phoneNumber: "1234567890",
                    isSmsOptIn: true,
                    techNotes: "Initial Tech Notes",
                };
            },
        });
    });

    it("Should render the CustomerDetails component", () => {
        expect(wrapper.exists()).toBe(true);
    });

    it("Should render all child components", () => {
        expect(wrapper.findComponent(TechNotes).exists()).toBe(true);
        expect(wrapper.findComponent(TextboxQuestion).exists()).toBe(true);
        expect(wrapper.findComponent(PhoneNumberQuestion).exists()).toBe(true);
        expect(wrapper.findComponent(CheckboxQuestion).exists()).toBe(true);
        expect(wrapper.findComponent(TextBlock).exists()).toBe(true);
        expect(wrapper.findComponent(FunnelHeader).exists()).toBe(true);
        expect(wrapper.findComponent(FunnelSubHeader).exists()).toBe(true);
        expect(wrapper.findComponent(Navbar).exists()).toBe(true);
    });

    it("Should pass the correct props to TechNotes", () => {
        const techNotes = wrapper.findComponent(TechNotes);
        expect(techNotes.props("modelValue")).toBe("Initial Tech Notes");
        expect(techNotes.props("textAreaLabelCopy")).toBe("Mocked CMS Content");
    });
});
