import React, {ReactNode, useEffect, useState} from 'react';
import {TimesheetMonth} from "../../models/timesheets";
import dayjs from "dayjs";
import locale from "dayjs/locale/el";
import CalendarDayTimesheet from "./CalendarDayTimesheet";
import './montlytimesheet.scss'
import {getHolidaysLookup} from "../../API/timesheets";
import FormButtonsContainer from "../UI/Forms/FormButton/FormButtonsContainer";
import FormButtonSave from "../UI/Forms/FormButton/FormButtonSave";

type MonthTimesheetProps = {
    month: TimesheetMonth
    setDayContent: (w: number, d: number, c: string) => void
    saveTimeSheet: () => void
}

const MonthlyTimesheet = ({month, setDayContent, saveTimeSheet}: MonthTimesheetProps) => {


    const [holidaysLookup, setHolidaysLookup] = useState([])

    useEffect(() => {

        (async () => {
            const res = await getHolidaysLookup()

            // ll['09:00']
            const l = res.data.unshift(
                {
                value: '09:00-17:00',
                name: '09:00-17:00',
            },
            {
                value: '07:00-15:00',
                    name: '07:00-15:00',
            },
            {
                value: '07:30-15:30',
                    name: '07:30-15:30',
            },
            {
                value: '08:00-16:00',
                    name: '08:00-16:00',
            },
            {
                value: '08:30-16:30',
                    name: '08:30-16:30',
            }

            )
            setHolidaysLookup(res.data)
        })()

    }, [])


    return (
        <div className="monthly-timesheet">


            <table className={'mb-5'}>
                <thead>
                <tr>
                    {
                        month[0].map((day) =>
                            <th key={dayjs(day.date).toISOString()}>{dayjs(day.date).locale('el-GR').format('dddd')}</th>
                        )
                    }
                </tr>
                </thead>

                <tbody>
                {
                    month && month.map((week, week_i) => {

                        return (
                            <tr key={week_i}>
                                {
                                    week.map((day, day_i) => {
                                        const date = dayjs(day.date);
                                        return (
                                            <CalendarDayTimesheet
                                                key={date.toISOString()} // or `${week_i}-${day_i}`
                                                day={day}
                                                setContent={(content: string) => setDayContent(week_i + 1, day_i + 1, content)}
                                                holidaysLookup={holidaysLookup}
                                            />
                                        );
                                    })
                                }
                            </tr>
                        )
                    })
                }

                </tbody>
            </table>


            <FormButtonsContainer align={'right'}>
                <FormButtonSave onClick={saveTimeSheet}>ΑΠΟΘΗΚΕΥΣΗ</FormButtonSave>
            </FormButtonsContainer>
        </div>
    );
}

export default MonthlyTimesheet;