import { cleanup, fireEvent, render, screen } from "@testing-library/react";
import React from "react";
import { afterEach, describe, expect, it } from "vitest";
import { DateInput, Day, MonthSelect, Year } from "./date-input";
afterEach(cleanup);
describe("DateInput Component", () => {
    it("should render correctly", () => {
        render(<DateInput name="birthday">
                <Day placeholder="DD"/>
                <MonthSelect />
                <Year placeholder="YYYY"/>
            </DateInput>);
        expect(screen.getByPlaceholderText("DD")).toBeTruthy();
        expect(screen.getByPlaceholderText("YYYY")).toBeTruthy();
        expect(screen.getByRole("combobox")).toBeTruthy(); // MonthSelect
    });
    it("should set default value", () => {
        render(<DateInput name="birthday" defaultValue="2000-01-15">
                <Day />
                <MonthSelect />
                <Year />
            </DateInput>);
        const dayInput = screen.getByRole("textbox", { name: "" }); // Day input type=text
        // Wait, Day input has no label, so getByRole might be ambiguous if not careful.
        // But here we have multiple inputs.
        // We can find by value or type.
        // Day is input[type="text"][inputmode="numeric"]
        // Year is input[type="number"]
        const inputs = screen.getAllByRole("textbox");
        const day = inputs.find(i => i.getAttribute("inputmode") === "numeric");
        const year = screen.getByRole("spinbutton"); // type="number"
        const month = screen.getByRole("combobox");
        expect(day.value).toBe("15");
        expect(year.value).toBe("2000");
        expect(month.value).toBe("1"); // January is 1-indexed in DateInput logic? 
        // Let's check logic: 
        // monthRef.current = value ? (currentMonth ?? 1) - 1 : state.month;
        // Select options value are 0-11 usually?
        // useMonths hook returns values.
    });
    it("should update hidden input when fields change", () => {
        render(<DateInput name="birthday">
                <Day placeholder="DD"/>
                <MonthSelect />
                <Year placeholder="YYYY"/>
            </DateInput>);
        const day = screen.getByPlaceholderText("DD");
        const year = screen.getByPlaceholderText("YYYY");
        const month = screen.getByRole("combobox");
        fireEvent.change(day, { target: { value: "20" } });
        fireEvent.change(month, { target: { value: "5" } }); // June (0-indexed? or 1-indexed?)
        fireEvent.change(year, { target: { value: "2023" } });
        // Hidden input
        // We can't easily select hidden input by role.
        // Use document.querySelector
        const hiddenInput = document.querySelector('input[name="birthday"]');
        // Logic: getCurrentValue(year, month, day) -> ISO string
        // If month is 5 (June), day 20, year 2023 -> 2023-06-20
        // Wait, MonthSelect values come from useMonths.
        // Usually they are 0-11 or 1-12.
        // Let's assume standard behavior.
        // If MonthSelect uses 0-11:
        // value "5" -> June.
        // ISO string expects 06.
        // We'll verify the format.
        expect(hiddenInput.value).toMatch(/2023-\d{2}-20/);
    });
});