import React, { useContext } from "react";
import Calendar from "react-calendar";
import { ContextLang } from "../../ContextLang";
import './calendar.css';

type TProps = {
    onCLick: (date: {ru: string, en: string}) => void
}

export const CalendarComponent:React.FC<TProps> = React.memo((props) => {
    const {lang} = useContext(ContextLang);
    const months = {
        0: {
            ru: 'Января',
            en: 'January'
        },
        1: {
            ru: 'Февраля',
            en: 'February'
        },
        2: {
            ru: 'Марта',
            en: 'March'
        },
        3: {
            ru: 'Апреля',
            en: 'April'
        },
        4: {
            ru: 'Мая',
            en: 'March'
        },
        5: {
            ru: 'Июня',
            en: 'June'
        },
        6: {
            ru: 'Июля',
            en: 'Jule'
        },
        7: {
            ru: 'Августа',
            en: 'August'
        },
        8: {
            ru: 'Сентября',
            en: 'September'
        },
        9: {
            ru: 'Октября',
            en: 'October'
        },
        10: {
            ru: 'Ноября',
            en: 'November'
        },
        11: {
            ru: 'Декабря',
            en: 'December'
        }
    }    
    return <Calendar        
        locale={lang}
        showDoubleView={false}
        next2Label={null}
        prev2Label={null}
        view={"month"}
        maxDetail={"month"}
        minDetail={"month"}
        // tileDisabled={(a) => {
        //         return props.disableDays.includes(a.date.getDate())
        // }}
        minDate={new Date()}
        onClickDay={(e) => {
                let dateObj = {
                    ru: `${e.getDate()} ${months[e.getMonth() as keyof typeof months].ru}`,
                    en: `${months[e.getMonth() as keyof typeof months].en} ${e.getDate()}`
                }
                props.onCLick(dateObj);
            }
        }
    />
})