import { useCallback, useMemo } from 'react';
import persian from 'react-date-object/calendars/persian';
import DatePicker from 'react-multi-date-picker';
import { Input } from '@/components/ui/input';
import { dariJalaliLocale } from '@/lib/dari-calendar-locale';
import {
    combineGregorianDateTime,
    splitGregorianDateTime,
} from '@/components/ui/app-datetime-input';
import {
    gregorianYmdToJalaliDateObject,
    jalaliDateObjectToGregorianYmd,
    JALALI_DISPLAY_FORMAT,
} from '@/lib/jalali-picker';
import { cn } from '@/lib/utils';

const INPUT_CLASS =
    'flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs outline-none md:text-sm font-vazirmatn text-left focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]';

/**
 * Unrestricted Jalali date + time for the manual punch modal (no portal, no date limits).
 *
 * @param {object} props
 * @param {string} props.id
 * @param {string} props.value Gregorian `Y-m-d H:i:s`
 * @param {(value: string) => void} props.onChange
 * @param {boolean} [props.invalid]
 */
export function ManualPunchDateTimeField({ id, value, onChange, invalid = false }) {
    const { date, time } = splitGregorianDateTime(value);

    const pickerValue = useMemo(
        () => gregorianYmdToJalaliDateObject(date) ?? '',
        [date],
    );

    const handleDateChange = useCallback(
        (picked) => {
            const gregorian = jalaliDateObjectToGregorianYmd(picked);

            if (gregorian) {
                onChange(combineGregorianDateTime(gregorian, time));
            }
        },
        [onChange, time],
    );

    const handleTimeChange = useCallback(
        (nextTime) => {
            if (date) {
                onChange(combineGregorianDateTime(date, nextTime));
            }
        },
        [date, onChange],
    );

    return (
        <div className="flex flex-col gap-2 sm:flex-row sm:items-start">
            <div className="min-w-0 flex-1">
                <DatePicker
                    id={`${id}_date`}
                    value={pickerValue}
                    onChange={handleDateChange}
                    calendar={persian}
                    locale={dariJalaliLocale}
                    digits={dariJalaliLocale.digits}
                    format={JALALI_DISPLAY_FORMAT}
                    onlyShowInRangeDates={false}
                    arrow
                    portal={false}
                    calendarPosition="bottom-start"
                    containerClassName="w-full"
                    className="rmdp-ams rmdp-ams-dari rmdp-ams-modal w-full"
                    inputClass={cn(INPUT_CLASS, invalid && 'border-destructive')}
                    weekStartDayIndex={0}
                    hideOnScroll={false}
                    mapDays={() => ({
                        disabled: false,
                        hidden: false,
                    })}
                />
            </div>
            <Input
                id={`${id}_time`}
                name={`${id}_time`}
                type="time"
                value={time}
                onChange={(e) => handleTimeChange(e.target.value)}
                aria-invalid={invalid}
                className={cn(
                    'w-full shrink-0 sm:w-32',
                    invalid && 'border-destructive',
                )}
            />
        </div>
    );
}