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

const NO_STATUS_KEY = 'no-status';

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

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

    const statusesWithNone = [
        ...(projectStatuses || []),
        { id: NO_STATUS_KEY, name: 'No Status', slug: NO_STATUS_KEY, color_code: null },
    ];

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

        const keys = statusesWithNone.map(s => s.slug || NO_STATUS_KEY);
        dispatch(updateOrdered(keys));

        statusesWithNone.forEach(status => {
            const key = status.slug || NO_STATUS_KEY;
            if (!columns?.[key]) {
                dispatch(fetchTasksByStatus({
                    projectId: projectInfo.id,
                    statusId: status.id === NO_STATUS_KEY ? null : status.id,
                    statusSlug: key,
                    limit: 15,
                    offset: 0,
                    append: false,
                    userId,
                    search,
                }));
            }
        });
    }, [projectInfo?.id, (projectStatuses || []).length, search]);

    const columnLabels = Object.fromEntries(
        statusesWithNone.map(s => [
            s.slug || NO_STATUS_KEY,
            { name: s.name, color: s.color_code },
        ])
    );

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

export default ProjectDetailsBoardSectionByStatus;