import { useEffect, useState } from "react";
import style from "./WeekInput.module.css";
import IconButton from "@mui/material/IconButton";
import ArrowForwardIcon from "@mui/icons-material/ArrowForwardIos";
import ArrowBackwardIcon from "@mui/icons-material/ArrowBackIos";
import HouseIcon from "@mui/icons-material/House";
import dayjs from "dayjs";
import weekday from "dayjs/plugin/weekday";
import "dayjs/locale/es";

dayjs.extend(weekday);
dayjs.locale("es");

export interface WeekInputProps {
    setStartDate: (date: dayjs.Dayjs) => void;
}

interface WeekInputData {
    currentDate: dayjs.Dayjs;
    lunes: dayjs.Dayjs;
    domingo: dayjs.Dayjs;
}

const WeekInput = (props: WeekInputProps) => {
    const { setStartDate } = props;
    const [fechas, setFechas] = useState<WeekInputData>({
        currentDate: dayjs().clone(),
        lunes: dayjs().clone().weekday(0),
        domingo: dayjs().clone().weekday(6),
    });

    const updateFechas = (fecha: dayjs.Dayjs) => {
        setFechas({
            currentDate: dayjs().clone(),
            lunes: fecha.clone().weekday(0),
            domingo: fecha.clone().weekday(6),
        });
        //setStartDate(fechas.lunes.clone());
    };

    const handlePrevious = () => {
        const newFecha = fechas.lunes.clone().add(-1, "w");

        updateFechas(newFecha);
    };
    const handleNext = () => {
        const newFecha = fechas.lunes.clone().add(1, "w");

        updateFechas(newFecha);
    };

    const handleHome = () => {
        const fecha = dayjs().clone();
        setFechas({
            currentDate: fecha,
            lunes: fecha.clone().weekday(0),
            domingo: fecha.clone().weekday(6),
        });
    };

    useEffect(() => {
        setStartDate(fechas.lunes.clone());
    }, [fechas, setStartDate]);
    return (
        <>
            <div className={style.weekInputCard}>
                <div className={style.weekInputDataContainer}>
                    <span className={style.weekInputCurrentDate}>
                        {fechas.currentDate.format("dddd D MMMM YYYY")}
                    </span>
                    <div className={style.weekInputDataFromTo}>
                        <span>{fechas.lunes.format("dddd D, MMMM")}</span>
                        <span>{fechas.domingo.format("dddd D, MMMM")}</span>
                    </div>
                </div>
                <div className={style.weekInputControls}>
                    <IconButton onClick={handlePrevious} aria-label="add an alarm">
                        <ArrowBackwardIcon sx={{ fontSize: 40 }} />
                    </IconButton>
                    <IconButton onClick={handleHome} aria-label="add an alarm">
                        <HouseIcon sx={{ fontSize: 40 }} />
                    </IconButton>
                    <IconButton onClick={handleNext} aria-label="add an alarm">
                        <ArrowForwardIcon sx={{ fontSize: 40 }} />
                    </IconButton>
                </div>
            </div>
        </>
    );
};

export default WeekInput;
