import { useState, useEffect, FC } from 'react';
import DatePicker from 'react-multi-date-picker';
import persian from 'react-date-object/calendars/persian';
import persian_fa from 'react-date-object/locales/persian_fa';
import DateObject from 'react-date-object';
import CalenderIcon from '../assets/images/calendar.svg'
import { clx } from '../helpers/utils';

type Props = {
    onChange: (date: string) => void;
    defaulValue?: string;
    error_text?: string;
    placeholder: string;
    reset?: boolean;
    isDateTime?: boolean;
    className?: string;
    label?: string
};

const DatePickerComponent: FC<Props> = (props: Props) => {
    const [value, setValue] = useState<DateObject | null>(null);

    useEffect(() => {
        if (props.reset) {
            setValue(null);
        }
    }, [props.reset]);

    useEffect(() => {
        if (value) {
            const formattedDate = `${value.year}/${value.month.number}/${value.day}`;
            props.onChange(formattedDate);
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [value]);

    useEffect(() => {
        if (props.defaulValue && !value) {
            const defaultDate = new DateObject({
                date: props.defaulValue,
                calendar: persian,
                locale: persian_fa,
            });
            setValue(defaultDate);
        }
    }, [props.defaulValue, value]);

    return (
        <div className="w-full">
            {props.label &&
                <div className='text-sm'>
                    {props.label}
                </div>}
            <div className={clx(
                'relative ',
                props.label && 'mt-1.5'
            )}>
                <DatePicker
                    placeholder={props.placeholder}
                    value={value}
                    onChange={(date) => setValue(date as DateObject)}
                    calendar={persian}
                    locale={persian_fa}
                    calendarPosition="bottom-right"
                    className={`rmdp-mobile ${props.className}`}
                />
                {props.error_text && props.error_text !== '' && (
                    <div className="text-xs text-right text-red-600 mt-2 mr-2 font-medium">
                        {props.error_text}
                    </div>
                )}

                <img src={CalenderIcon} className='absolute top-0 bottom-0 my-auto left-2' />
            </div>
        </div>
    );
};

export default DatePickerComponent;