import { GetAvailableDatesResult } from "@core/Models/Appointments.model";
import dayjs from "dayjs";
import "dayjs/locale/es";
import utc from "dayjs/plugin/utc";
import { useState } from "react";

dayjs.extend(utc);
dayjs.locale("es"); // Configurar idioma global

export interface AppointmentsCalendarProps {
    onChange: (date: dayjs.Dayjs) => void;
    availableDates: GetAvailableDatesResult;
}

export default function AppointmentsCalendar(props: AppointmentsCalendarProps) {
    const { availableDates = { availableDates: [], inRangeDates: [] } } = props;
    const dateNow = dayjs(new Date());
    const firstWeekDay = dateNow.startOf("week");
    const days = [0, 1, 2, 3, 4, 5, 6];
    const weeks = [0, 1, 2, 3, 4];
    const [selectedDate, setSelectedDate] = useState(dayjs(new Date()).startOf("day"));

    const isNow = (week: number, day: number): boolean => {
        return dateNow.startOf("day").isSame(firstWeekDay.add(week * 7 + day, "day").startOf("day"));
    };

    const isSelected = (week: number, day: number): boolean => {
        return selectedDate.startOf("day").isSame(firstWeekDay.add(week * 7 + day, "day").startOf("day"));
    };

    const isBefore = (week: number, day: number): boolean => {
        return firstWeekDay.add(week * 7 + day, "day").isBefore(dateNow.startOf("day"));
    };

    const isHighlighted = (week: number, day: number): boolean => {
        const currentDay = firstWeekDay
            .clone()
            .utc()
            .add(week * 7 + day, "day")
            .startOf("day");

        for (const item of availableDates.availableDates) {
            const itemTest = dayjs.utc(item).startOf("day");

            if (currentDay.isSame(itemTest)) {
                return true;
            }
        }

        return false;
    };

    const getBackgroundColor = (week: number, day: number): string => {
        if (isSelected(week, day)) {
            return "var(--wine-light)";
        } else if (isHighlighted(week, day)) {
            return "var(--wine-lighterX2)";
        }

        return "transparent";
    };

    const isSameMonth = (week: number, day: number): boolean => {
        const currentDay = firstWeekDay
            .clone()
            .utc()
            .add(week * 7 + day, "day")
            .startOf("day");
        const currentMonth = dayjs().month();

        if (currentDay.month() != currentMonth) {
            return true;
        }

        return false;
    };

    return (
        <>
            <div
                style={{
                    marginTop: "30px",
                    marginBottom: "10px",
                    paddingLeft: "5px",
                    color: "var(--black)",
                    fontSize: "16px",
                    fontWeight: "700",
                }}
            >
                Seleccionar fecha:
            </div>
            {/*<div style={{ paddingLeft: "10px", marginBottom: "10px" }}>
                <div style={{ display: "flex", flexDirection: "row", alignItems: "center" }}>
                    <div
                        style={{
                            backgroundColor: "var(--wine-lighterX2)",
                            width: "20px",
                            height: "20px",
                            borderRadius: "4px",
                        }}
                    >
                        &nbsp;
                    </div>
                    <span style={{ paddingLeft: "5px" }}>Habilitado para reservas</span>
                </div>
            </div>*/}
            <div
                style={{
                    border: "solid 1px var(--gray-dark)",
                    borderRadius: "7px",
                    background: "linear-gradient(180deg, var(--white-dark) 0%, var(--white) 30%)",
                    paddingTop: "10px",
                    paddingBottom: "10px",
                }}
            >
                <div
                    style={{
                        fontWeight: "700",
                        fontSize: "18px",
                        textAlign: "center",
                        paddingLeft: "20px",
                        paddingBottom: "10px",
                        textTransform: "capitalize",
                        borderBottom: "solid 1px var(--gray-light)",
                        marginBottom: "5px",
                    }}
                >
                    {selectedDate.format("DD") +
                        " de " +
                        selectedDate.format("MMMM") +
                        " " +
                        selectedDate.format("YYYY")}
                </div>
                <div
                    style={{
                        display: "flex",
                        flexDirection: "row",
                        justifyContent: "space-between",
                        textTransform: "uppercase",
                        height: "40px",
                        paddingBottom: "5px",
                        borderBottom: "solid 1px var(--gray-light)",
                    }}
                >
                    {days.map((day) => {
                        return (
                            <div
                                key={day}
                                style={{
                                    textAlign: "center",
                                    margin: "auto",
                                    fontWeight: "600",
                                    fontSize: "14px",
                                    width: "100%",
                                }}
                            >
                                {dayjs(firstWeekDay.add(day, "day")).format("dd")}
                            </div>
                        );
                    })}
                </div>
                <div>
                    {weeks.map((week) => {
                        return (
                            <div
                                key={week}
                                style={{
                                    display: "flex",
                                    flexDirection: "row",
                                    justifyContent: "space-between",
                                    textTransform: "uppercase",
                                    marginTop: "0px",
                                    height: "60px",
                                    padding: "5px",
                                }}
                            >
                                {days.map((day) => {
                                    return (
                                        <div
                                            key={day}
                                            style={{
                                                textAlign: "center",
                                                margin: "auto",
                                                fontWeight: isSelected(week, day)
                                                    ? "700"
                                                    : isNow(week, day)
                                                    ? "700"
                                                    : isSameMonth(week, day)
                                                    ? "400"
                                                    : "600",
                                                fontSize: isNow(week, day) ? "16px" : "14px",
                                                width: "100%",
                                                color: isBefore(week, day)
                                                    ? "var(--gray-light)"
                                                    : isNow(week, day)
                                                    ? "var(--wine-red)"
                                                    : isSelected(week, day)
                                                    ? "var(--white)"
                                                    : isSameMonth(week, day)
                                                    ? "var(--gray-darkest)"
                                                    : "var(--black)",
                                                cursor: "pointer",
                                                backgroundColor: getBackgroundColor(week, day),
                                                height: "60px",
                                                lineHeight: "60px",
                                                borderRadius: "0px",
                                                border: isNow(week, day)
                                                    ? "solid 1px var(--wine-light)"
                                                    : "none",
                                            }}
                                            onClick={() => {
                                                if (isBefore(week, day)) return;
                                                const auxDate = firstWeekDay
                                                    .add(week * 7 + day, "day")
                                                    .startOf("day");
                                                setSelectedDate(auxDate);
                                                props.onChange(auxDate);
                                            }}
                                        >
                                            {dayjs(firstWeekDay.add(week * 7 + day, "day")).format("DD")}
                                        </div>
                                    );
                                })}
                            </div>
                        );
                    })}
                </div>
            </div>
        </>
    );
}
