import { shallowMount } from "@vue/test-utils";
import datePicker from "./date-picker";

const AVAILABLE_DATES = ["2026-01-21", "2026-01-22", "2026-01-23", "2026-01-25"];

function mountDesktop(props = {}) {
    Object.defineProperty(window, "innerWidth", {
        writable: true,
        configurable: true,
        value: 1024,
    });
    return shallowMount(datePicker, {
        props: {
            availableDates: AVAILABLE_DATES,
            startDate: "2026-01-21",
            endDate: "2026-01-25",
            modelValue: null,
            ...props,
        },
    });
}

function mountMobile(props = {}) {
    Object.defineProperty(window, "innerWidth", {
        writable: true,
        configurable: true,
        value: 375,
    });
    return shallowMount(datePicker, {
        props: {
            availableDates: AVAILABLE_DATES,
            startDate: "2026-01-21",
            endDate: "2026-01-25",
            modelValue: null,
            ...props,
        },
    });
}

describe("date-picker.vue", () => {
    afterEach(() => {
        Object.defineProperty(window, "innerWidth", {
            writable: true,
            configurable: true,
            value: 1024,
        });
    });

    describe("rendering", () => {
        test("renders 5 date cards on desktop", () => {
            const wrapper = mountDesktop();
            expect(wrapper.findAll(".date-picker__day-card").length).toBe(5);
            wrapper.unmount();
        });

        test("renders 3 date cards on mobile", () => {
            const wrapper = mountMobile();
            expect(wrapper.findAll(".date-picker__day-card").length).toBe(3);
            wrapper.unmount();
        });

        test("renders disabled cards for dates not in availableDates", () => {
            const wrapper = mountDesktop();
            // Jan 24 is not in AVAILABLE_DATES but falls in the range Jan 21–25
            const disabledCards = wrapper.findAll(".date-picker__day-card--disabled");
            expect(disabledCards.length).toBeGreaterThan(0);
            wrapper.unmount();
        });

        test("back navigation button is disabled at the start", () => {
            const wrapper = mountDesktop();
            const backBtn = wrapper.findAll(".date-picker__nav-btn")[0];
            expect(backBtn.attributes("disabled")).toBeDefined();
            wrapper.unmount();
        });
    });

    describe("allDates computation", () => {
        test("builds a contiguous date range between first and last available date", () => {
            const wrapper = mountDesktop();
            const allValues = wrapper.vm.allDates.map((d) => d.value);
            // Range Jan 21–25 should include all 5 dates
            expect(allValues).toEqual([
                "2026-01-21",
                "2026-01-22",
                "2026-01-23",
                "2026-01-24",
                "2026-01-25",
            ]);
            wrapper.unmount();
        });

        test("marks dates not in availableDates as unavailable", () => {
            const wrapper = mountDesktop();
            const jan24 = wrapper.vm.allDates.find((d) => d.value === "2026-01-24");
            expect(jan24.isAvailable).toBe(false);
            wrapper.unmount();
        });

        test("marks dates in availableDates as available", () => {
            const wrapper = mountDesktop();
            const jan21 = wrapper.vm.allDates.find((d) => d.value === "2026-01-21");
            expect(jan21.isAvailable).toBe(true);
            wrapper.unmount();
        });

        test("attaches correct day abbreviation to each date", () => {
            const wrapper = mountDesktop();
            const jan21 = wrapper.vm.allDates.find((d) => d.value === "2026-01-21");
            // 2026-01-21 is a Wednesday
            expect(jan21.dayAbbr).toBe("WED");
            wrapper.unmount();
        });

        test("returns empty array when availableDates is empty", () => {
            const wrapper = mountDesktop({ availableDates: [] });
            expect(wrapper.vm.allDates).toEqual([]);
            wrapper.unmount();
        });
    });

    describe("date selection", () => {
        test("emits update:modelValue with the date string when an available card is clicked", async () => {
            const wrapper = mountDesktop();
            const availableCard = wrapper.find(
                ".date-picker__day-card:not(.date-picker__day-card--disabled)"
            );
            await availableCard.trigger("click");
            expect(wrapper.emitted("update:modelValue")).toBeTruthy();
            expect(wrapper.emitted("update:modelValue")[0][0]).toBe("2026-01-21");
            wrapper.unmount();
        });

        test("does not emit when a disabled card is clicked", async () => {
            const wrapper = mountDesktop();
            const disabledCard = wrapper.find(".date-picker__day-card--disabled");
            await disabledCard.trigger("click");
            expect(wrapper.emitted("update:modelValue")).toBeFalsy();
            wrapper.unmount();
        });

        test("applies the selected class to the card matching modelValue", async () => {
            const wrapper = mountDesktop({ modelValue: "2026-01-21" });
            const selectedCard = wrapper.find(".date-picker__day-card--selected");
            expect(selectedCard.exists()).toBeTruthy();
            wrapper.unmount();
        });

        test("no card has the selected class when modelValue is null", () => {
            const wrapper = mountDesktop({ modelValue: null });
            expect(wrapper.find(".date-picker__day-card--selected").exists()).toBe(false);
            wrapper.unmount();
        });
    });

    describe("navigation", () => {
        test("goForward advances windowStart by the window size", async () => {
            // Use a longer range so forward is possible on desktop (window 5)
            const manyDates = ["2026-01-01", "2026-01-02", "2026-01-03", "2026-01-10"];
            const wrapper = mountDesktop({
                availableDates: manyDates,
                startDate: "2026-01-01",
                endDate: "2026-01-10",
            });
            expect(wrapper.vm.canGoForward).toBe(true);
            await wrapper.vm.goForward();
            expect(wrapper.vm.windowStart).toBe(5);
            wrapper.unmount();
        });

        test("goBack decrements windowStart by the window size", async () => {
            const manyDates = ["2026-01-01", "2026-01-02", "2026-01-03", "2026-01-10"];
            const wrapper = mountDesktop({
                availableDates: manyDates,
                startDate: "2026-01-01",
                endDate: "2026-01-10",
            });
            await wrapper.vm.goForward();
            await wrapper.vm.goBack();
            expect(wrapper.vm.windowStart).toBe(0);
            wrapper.unmount();
        });

        test("goBack does not go below 0", () => {
            const wrapper = mountDesktop();
            wrapper.vm.goBack();
            expect(wrapper.vm.windowStart).toBe(0);
            wrapper.unmount();
        });

        test("goForward does not exceed the last window position", async () => {
            // Range Jan 21–25 = 5 dates, window 5 on desktop → already at max
            const wrapper = mountDesktop();
            await wrapper.vm.goForward();
            // windowStart should not push visible window past the array length
            expect(wrapper.vm.windowStart + wrapper.vm.windowSize).toBeLessThanOrEqual(
                wrapper.vm.allDates.length + wrapper.vm.windowSize
            );
            wrapper.unmount();
        });

        test("back button becomes enabled after navigating forward", async () => {
            const manyDates = ["2026-01-01", "2026-01-02", "2026-01-03", "2026-01-10"];
            const wrapper = mountDesktop({
                availableDates: manyDates,
                startDate: "2026-01-01",
                endDate: "2026-01-10",
            });
            await wrapper.vm.goForward();
            await wrapper.vm.$nextTick();
            const backBtn = wrapper.findAll(".date-picker__nav-btn")[0];
            expect(backBtn.attributes("disabled")).toBeUndefined();
            wrapper.unmount();
        });
    });

    describe("initial window positioning", () => {
        test("scrolls to the window containing the pre-selected date on mount", () => {
            // Jan 25 is the 5th date (index 4); with window size 5 on desktop it's still in window 0
            const wrapper = mountDesktop({ modelValue: "2026-01-25" });
            expect(wrapper.vm.windowStart).toBe(0);
            wrapper.unmount();
        });
    });
});