import { createSignal } from "solid-js";
import { Button } from "./Button";
import { Card } from "./Card";

function daysInMonth(date: Date): number {
    const month = date.getMonth();
    const year = date.getFullYear();

    if (month === 1) {
        // February
        if ((year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0)) {
            return 29; // Leap year
        } else {
            return 28;
        }
    }
    else {
        return [31, -1, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
    }
}

function monthName(date: Date): string {
    const month = date.getMonth();
    return ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"][month]; //TODO: Localization
}

interface DateSelectorProps {

}

export function DateSelector() {
    const [selectedDate, setSelectedDate] = createSignal(new Date(9999, 0, 1));
    const [disableYearUp, setDisableYearUp] = createSignal(selectedDate().getFullYear() >= 9999);
    const [disableYearDown, setDisableYearDown] = createSignal(selectedDate().getFullYear() <= 1500);

    const updateDate = (yearOffset: number, monthOffset: number, dayOffset: number) => {
        const current = selectedDate();

        let newYear = current.getFullYear() + yearOffset;
        let newMonth = current.getMonth() + monthOffset;
        let newDay = current.getDate() + dayOffset;

        if (newYear < 1500) newYear = 1500;
        if (newYear > 9999) newYear = 9999;

        if (newMonth < 0) {
            newMonth = 11;
        }
        if (newMonth > 11) {
            newMonth = 0;
        }

        const nextDate = new Date(newYear, newMonth, newDay);

        let daysInNextMonth = daysInMonth(new Date(newYear, newMonth, 1));
        if (nextDate.getMonth() !== newMonth) {
            nextDate.setDate(daysInNextMonth);
        }

        setSelectedDate(nextDate);

        if (nextDate.getFullYear() === 9999) {
            setDisableYearUp(true);
        } else {
            setDisableYearUp(false);
        }

        if (nextDate.getFullYear() === 1500) {
            setDisableYearDown(true);
        } else {
            setDisableYearDown(false);
        }
    };

    return (
        <Card class=""
            body={
                <div class="flex flex-row justify-center items-center space-x-2">
                    <div class="flex flex-col items-center justify-center border-x border-black rounded-2xl">
                        <Button class="w-full" onclick={() => updateDate(0, 1, 0)}>
                            <p class="text-2xl">Up</p>
                        </Button>
                        <div class="">
                            <p class="text-3xl text-center">{monthName(selectedDate())}</p>
                        </div>
                        <Button class="w-full px-12" onclick={() => updateDate(0, -1, 0)}>
                            <p class="text-2xl">Down</p>
                        </Button>
                    </div>
                    <div class="flex flex-col items-center justify-center border-x border-black rounded-2xl">
                        <Button class="w-full" onclick={() => updateDate(0, 0, 1)}>
                            <p class="text-2xl">Up</p>
                        </Button>
                        <div class="">
                            <p class="text-3xl text-center">{selectedDate().getDate()}</p>
                        </div>
                        <Button class="w-full" onclick={() => updateDate(0, 0, -1)}>
                            <p class="text-2xl">Down</p>
                        </Button>
                    </div>
                    <div class="flex flex-col items-center justify-center border-x border-black rounded-2xl">
                        <Button class="w-full" onclick={() => updateDate(1, 0, 0)} disabled={disableYearUp()}>
                            <p class="text-2xl">Up</p>
                        </Button>
                        <div class="">
                            <p class="text-3xl text-center">{selectedDate().getFullYear()}</p>
                        </div>
                        <Button class="w-full" onclick={() => updateDate(-1, 0, 0)} disabled={disableYearDown()}>
                            <p class="text-2xl">Down</p>
                        </Button>
                    </div>
                </div>
            }
        />
    );
}