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

const NO_PRIORITY_KEY = 'no-priority';

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

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

    const prioritiesWithNoPriority = [
        ...(projectPriorities || []),
        { id: NO_PRIORITY_KEY, name: 'No Priority', slug: NO_PRIORITY_KEY, color_code: null },
    ];

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

        const keys = prioritiesWithNoPriority.map(p => p.slug || NO_PRIORITY_KEY);
        dispatch(updateOrdered(keys));

        prioritiesWithNoPriority.forEach(priority => {
            const key = priority.slug || NO_PRIORITY_KEY;
            // Only fetch if not already loaded (reuse data from list group-by view)
            if (!columns?.[key]) {
                dispatch(fetchTasksByPriority({
                    projectId: projectInfo.id,
                    priorityId: priority.id === NO_PRIORITY_KEY ? null : priority.id,
                    prioritySlug: key,
                    limit: 15,
                    offset: 0,
                    append: false,
                    userId,
                    search,
                }));
            }
        });
    }, [projectInfo?.id, (projectPriorities || []).length, search]);

    const columnLabels = Object.fromEntries(
        prioritiesWithNoPriority.map(p => [
            p.slug || NO_PRIORITY_KEY,
            { name: p.name, color: p.color_code },
        ])
    );

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

export default ProjectDetailsBoardSectionByPriority;