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

const NO_ASSIGNED_KEY = 'no-assigned';

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

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

    const membersWithNone = [
        ...(boardMembers || []),
        { id: NO_ASSIGNED_KEY, name: 'No Member Assigned', avatar: null },
    ];

    useEffect(() => {
        if (!projectInfo?.id || !(boardMembers || []).length) return;

        const keys = membersWithNone.map(m =>
            m.id === NO_ASSIGNED_KEY ? NO_ASSIGNED_KEY : String(m.id)
        );
        dispatch(updateOrdered(keys));

        membersWithNone.forEach(member => {
            const key = member.id === NO_ASSIGNED_KEY ? NO_ASSIGNED_KEY : String(member.id);
            if (!columns?.[key]) {
                dispatch(fetchTasksByMember({
                    projectId: projectInfo.id,
                    memberId: member.id === NO_ASSIGNED_KEY ? null : member.id,
                    limit: 15,
                    offset: 0,
                    append: false,
                    userId,
                    search,
                }));
            }
        });
    }, [projectInfo?.id, (boardMembers || []).length, search]);

    const columnLabels = Object.fromEntries(
        membersWithNone.map(m => [
            m.id === NO_ASSIGNED_KEY ? NO_ASSIGNED_KEY : String(m.id),
            { name: m.name, avatar: m.avatar },
        ])
    );

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

export default ProjectDetailsBoardSectionByMember;