negareh-console/src/components/DatePicker.tsx

import { useState, useEffect, type 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 { Calendar } from 'iconsax-react';
import { clx } from '@/helpers/utils';

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

const DatePickerComponent: FC<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);
        }
    }, [value]);

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

    return (
        <div className="w-full">
            {
                props.label &&
                <div className='text-sm text-foreground font-medium mb-2'>{props.label}</div>
            }
            <div className={clx(
                'relative',
                props.readOnly && 'readOny',
                props.label && 'mt-1'
            )}>
                <DatePicker
                    placeholder={props.placeholder}
                    value={value}
                    onChange={(date) => setValue(date as DateObject)}
                    calendar={persian}
                    locale={persian_fa}
                    calendarPosition="bottom-right"
                    className={props.className}
                    readOnly={props.readOnly}
                />
                {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>
                )}

                <Calendar
                    size={20}
                    color='#8c90a3'
                    className='absolute top-0 bottom-0 my-auto left-2 pointer-events-none'
                />
            </div>
        </div>
    );
};

export default DatePickerComponent;