import React, {ReactNode} from 'react';
import {TimesheetDay} from "../../models/timesheets";
import CustomRadioSelect from "../UI/Forms/CustomSelect/CustomRadioSelect";
import SelectItem from "../UI/Forms/CustomSelect/SelectItem";
import {CustomSelectOptions} from "../../models/ReactComponents";

type TimesheetDayProps = {
    day: TimesheetDay
    setContent: (c: string) => void
    holidaysLookup: CustomSelectOptions
}

const CalendarDayTimesheet = ({day, holidaysLookup, setContent}: TimesheetDayProps) => {


    return (
        <td className={`${day.has_control ? 'control' : 'disable'}`}>
            <p className={'date'}>{day.date.slice(8)}</p>
            {
                day.has_control &&
                <>
                    {day.public_holiday
                        ?
                        <p className={'holiday'}>{day.public_holiday}</p>
                        :
                        <CustomRadioSelect
                            theme={'timesheet'}
                            value={day.content}
                            handleChange={(e) => setContent(e)}
                        >

                            {
                                holidaysLookup.map(ent =>
                                    <SelectItem key={ent.value} value={ent.value}>{ent.name}</SelectItem>
                                )
                            }
                        </CustomRadioSelect>}
                </>
            }
        </td>
    );
}

export default CalendarDayTimesheet;