'use client';

import { useEffect, useRef, useState } from 'react';
import { DatePicker as DatePickerJalali } from "jalaali-react-date-picker";
import Image from 'next/image';
import { Button, Skeleton } from '@mui/material';

function DatePicker({ date, updateDate }) {

    const nextIconDatePicker = useRef();

    const [startDate, setStartDate] = useState(null);
    const [endDate, setEndDate] = useState();
    const [loading, setLoading] = useState(true);

    const handleStartDateChange = (date) => {
        if (date) {
            setStartDate(date);
            setEndDate(null); // Clear end date if start date is selected
            // updateDate(date); // Notify parent about the selected date
        }
    };

    const handleEndDateChange = (date) => {
        if (date) {
            setEndDate(date);
            setStartDate(null); // Clear start date if end date is selected
            // updateDate(date); // Notify parent about the selected date
        }
    };

    const handleDisableDate = e => {
        const today = new Date();
        return today >= e._d
    }

    useEffect(() => {
        if (nextIconDatePicker.current) {
            nextIconDatePicker.current.click()
            setLoading(false)
        }
    }, [nextIconDatePicker])

    return (
        <div className='flex items-start justify-evenly w-full'>
            <div className='w-1/2 relative flex justify-center'>
                <DatePickerJalali
                    value={startDate}
                    className={`w-full ${loading ? 'opacity-0' : 'opacity-100'}`}
                    timePicker={false}
                    onChange={handleStartDateChange}
                    disabledDates={e => handleDisableDate(e)}
                />
                {loading && (
                    <Skeleton
                        variant="rectangular"
                        className='!w-[300px] !rounded-[6px] !absolute !top-0 !right-1/2 !translate-x-1/2 !z-10'
                        height={352}
                    />
                )}
            </div>
            <div className='w-1/2 hidden md:flex lg:hidden xl:flex'>
                <div className='w-full relative flex justify-center'>
                    <DatePickerJalali
                        value={endDate}
                        timePicker={false}
                        className={`w-full ${loading ? 'opacity-0' : 'opacity-100'}`}
                        nextIcon={
                            <Button
                                className='!min-w-0 !p-0 !rounded-full'
                                ref={nextIconDatePicker}
                                onClick={e => e.preventDefault()}
                            >
                                <Image
                                    src='/assets/icons/arrow-right.svg'
                                    className='icon-left-datepicker'
                                    height={24}
                                    width={24}
                                />
                            </Button>
                        }
                        onChange={handleEndDateChange}
                        disabledDates={e => handleDisableDate(e)}
                    />
                    {loading && (
                        <Skeleton
                            variant="rectangular"
                            className='!w-[300px] !rounded-[6px] !absolute !top-0 !right-1/2 !translate-x-1/2 !z-10'
                            height={352}
                        />
                    )}
                </div>
            </div>
        </div>
    );
}

export default DatePicker;