import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import {
    fetchTasksByDueDate,
    updateOrdered,
} from '../../Settings/store/taskSlice';
import ProjectDetailsBoard from './ProjectDetailsBorad';

const DUE_DATE_SECTIONS = [
    { key: 'today', label: 'Today' },
    { key: 'next_seven_days', label: 'Next 7 Days' },
    { key: 'overdue', label: 'Overdue' },
    { key: 'upcoming', label: 'Upcoming' },
    { key: 'no-date', label: 'No Due Date' },
];

const ProjectDetailsBoardSectionByDueDate = () => {
    const dispatch = useDispatch();
    const { loggedUserId } = useSelector(state => state.auth.user);
    const { loggedInUser } = useSelector(state => state.auth.session);
    const { projectInfo, columns, filterValues } = useSelector(state => state.settings.task);

    const userId = loggedInUser ? loggedInUser.loggedUserId : loggedUserId;
    const search = filterValues?.name || '';

    useEffect(() => {
        if (!projectInfo?.id) return;

        const keys = DUE_DATE_SECTIONS.map(s => s.key);
        dispatch(updateOrdered(keys));

        DUE_DATE_SECTIONS.forEach(section => {
            if (!columns?.[section.key]) {
                dispatch(fetchTasksByDueDate({
                    projectId: projectInfo.id,
                    dateType: section.key,
                    limit: 15,
                    offset: 0,
                    append: false,
                    userId,
                    search,
                }));
            }
        });
    }, [projectInfo?.id, search]);

    const columnLabels = Object.fromEntries(
        DUE_DATE_SECTIONS.map(s => [s.key, { name: s.label }])
    );

    return (
        <ProjectDetailsBoard
            groupByType="duedate"
            columnLabels={columnLabels}
        />
    );
};

export default ProjectDetailsBoardSectionByDueDate;