import React, {FC} from 'react';
import {LocalizationProvider} from '@mui/x-date-pickers/LocalizationProvider';
import {AdapterMomentJalaali} from '@mui/x-date-pickers/AdapterMomentJalaali';
import {DateCalendar} from '@mui/x-date-pickers/DateCalendar';
import 'moment/locale/fa';
import {datePickerUtilValuesEn as EnValues} from './utils/date-calendar-values-en';
import {datePickerUtilValuesFa as FaValues} from './utils/date-calendar-values-fa';
import {DateCalendarStyle as S} from './date-calendar.style';
import {IDateCalendar as Props} from './date-calendar.type';
import LeftArrow from 'herein-icon/chevron-left';
import RightArrow from 'herein-icon/chevron-right';
import moment from 'moment-jalaali';

moment.locale('fa');

export const DateCalendarComponent: FC<Props> = ({lang, ...calendarProps}) => {
    const values = lang == 'fa' ? FaValues : EnValues;

    const dateValue = moment.isMoment(calendarProps.value)
        ? calendarProps.value
        : moment(calendarProps.value);

    return (
        <LocalizationProvider
            dateAdapter={AdapterMomentJalaali}
            adapterLocale={lang === 'fa' ? 'fa' : 'en'}
        >
            <S.Container>
                <DateCalendar
                    dayOfWeekFormatter={values.dayOfWeekFormatter}
                    views={['year', 'month', 'day']}
                    {...calendarProps}
                    value={dateValue}
                    slots={{
                        rightArrowIcon: lang == 'fa' ? LeftArrow : RightArrow,
                        leftArrowIcon: lang == 'fa' ? RightArrow : LeftArrow,
                        ...calendarProps.slots,
                    }}
                />
            </S.Container>
        </LocalizationProvider>
    );
};