import React, { useState, useEffect } from 'react';
import { Dropdown, DropdownButton } from 'react-bootstrap';
import moment from 'moment';
import styles from '@/styles/Component/Dashboard/LeadsStatement.module.scss';
import { useApp } from '@/components/App';

interface WeeklyDateRangePickerProps {
    onChange?: (dateRange: { startDate: moment.Moment; endDate: moment.Moment }) => void;
    setSelectedStartDate: (date: string) => void;
    setSelectedEndDate: (date: string) => void;
}

const WeeklyDateRangePicker: React.FC<WeeklyDateRangePickerProps> = ({ onChange, setSelectedStartDate, setSelectedEndDate }) => {
    const [weeks, setWeeks] = useState<Array<{ label: string; startDate: moment.Moment; endDate: moment.Moment }>>([]);
    const [fromWeek, setFromWeek] = useState<number | null>(null);
    const [toWeek, setToWeek] = useState<number | null>(null);
    const { userDetail } = useApp();

    useEffect(() => {
        const startDate = moment(userDetail?.created_at);
        const endDate = moment();
        const weeksList: typeof weeks = [];

        const currentWeek = moment(startDate);
        while (currentWeek.isSameOrBefore(endDate, 'week')) {
            const weekStart = currentWeek.clone().startOf('week');
            const weekEnd = currentWeek.clone().endOf('week');
            weeksList.push({
                label: weekStart.format('DD/MM/YYYY'),
                startDate: weekStart,
                endDate: weekEnd,
            });
            currentWeek.add(1, 'week');
        }

        setWeeks(weeksList);
        // @typescript-eslint/no-unused-expressions
        if (weeksList.length > 0) {
            const latestWeekIndex = 1;
            setFromWeek(0);
            setToWeek(latestWeekIndex);

            const selectedWeek = weeksList[latestWeekIndex];
            setSelectedStartDate(selectedWeek.startDate.format('DD/MM/YYYY'));
            setSelectedEndDate(selectedWeek.endDate.format('DD/MM/YYYY'));
            onChange?.({ startDate: selectedWeek.startDate, endDate: selectedWeek.endDate });
        }
    }, [userDetail?.created_at]);

    useEffect(() => {
        if (
            fromWeek !== null &&
            toWeek !== null &&
            fromWeek <= toWeek &&
            weeks[fromWeek] &&
            weeks[toWeek]
        ) {
            const start = weeks[fromWeek];
            const end = weeks[toWeek - 1];

            setSelectedStartDate(start.startDate.format('DD/MM/YYYY'));
            setSelectedEndDate(end.endDate.format('DD/MM/YYYY'));

        }
    }, [fromWeek, toWeek]);

    return (
        <div className="d-flex align-items-center">
            <span className="me-2">From:</span>
            <DropdownButton
                id="weekly-from-dropdown"
                title={fromWeek !== null ? weeks[fromWeek].label : 'Select week'}
                variant="outline-secondary"
                className={`${styles.FIlterCustomDropdown} customDropdown me-3`}
            >
                <div style={{ maxHeight: '200px', overflowY: 'auto' }}>
                    {weeks.map((week, idx) => {
                        if (idx === weeks.length - 1) {
                            return null;
                        }
                        return (
                            <Dropdown.Item
                                key={idx}
                                onClick={() => {
                                    setFromWeek(idx);
                                    if (toWeek !== null && toWeek <= idx) setToWeek(idx + 1);
                                }}
                            >
                                {week.label}
                            </Dropdown.Item>
                        );
                    })}
                </div>
            </DropdownButton>
            <span className="me-2">To:</span>
            <DropdownButton
                id="weekly-to-dropdown"
                title={toWeek !== null ? weeks[toWeek].label : 'Select week'}
                variant="outline-secondary"
                className={`${styles.FIlterCustomDropdown} customDropdown`}
            >
                <div style={{ maxHeight: '200px', overflowY: 'auto' }}>
                    {
                        weeks
                            .map((week, idx) => {
                                if (idx === 0) {
                                    return null;
                                }
                                return (
                                    <Dropdown.Item key={idx} onClick={() => {
                                        setToWeek(idx);
                                        if (fromWeek !== null && fromWeek >= idx) setFromWeek(idx - 1);
                                    }}>
                                        {week.label}
                                    </Dropdown.Item>
                                );
                            })
                    }

                </div>
            </DropdownButton>
        </div>
    );
};

export default WeeklyDateRangePicker;