import { Fragment, useEffect, useRef } from 'react';
import { Grid, LoadingOverlay, ScrollArea, Text, Overlay, Box, Badge } from "@mantine/core";
import { useSelector, useDispatch } from "react-redux";
import { fetchSettings } from "../../Settings/store/settingSlice";
import { fetchTasksMemberWise, updateTasksLoading } from '../../Settings/store/taskSlice';
import { translate } from '../../../utils/i18n';
import { IconArchive } from '@tabler/icons-react';
import TaskListByMember from './TasksElements/GroupByPriority/TaskListByMember';

const ProjectDetailsListByMember = (props) => {
    const dispatch = useDispatch();
    const { isLoading, isTasksLoading, projectInfo, } = useSelector((state) => state.settings.task);
    const { serialSettings } = useSelector((state) => state.settings.setting);
    const { loggedUserId } = useSelector((state) => state.auth.user);
    const { loggedInUser } = useSelector((state) => state.auth.session);
    const userId = loggedInUser ? loggedInUser.loggedUserId : loggedUserId;

    useEffect(() => {
        if (!serialSettings) {
            dispatch(fetchSettings());
        }
    }, [dispatch, serialSettings]);

    const loadedProjectRef = useRef(null);

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

        loadedProjectRef.current = projectInfo.id;
        dispatch(updateTasksLoading(true));

        const fetchData = async () => {
            try {
                await dispatch(fetchTasksMemberWise({
                    projectId: projectInfo.id,
                    limit: 10,
                    offset: 0,
                    search: '',
                    userId: userId
                }));
            } catch (err) {
                console.log("Unexpected error:", err);
            } finally {
                dispatch(updateTasksLoading(false));
            }
        };

        fetchData();
    }, [projectInfo?.id, userId, dispatch]);

    return (
        <Fragment>
            <div className="border border-b-0 rounded-t-xl px-2 py-3 bg-white !pl-[25px]">
                <Grid gutter="0" columns={24}>
                    <Grid.Col span={22}>
                        <Grid columns={24} align="center">
                            {serialSettings && serialSettings.enabled && (
                                <Grid.Col span={1.5}>
                                    <Text c="dimmed" className="!pl-[20px]" fz="xs" fw={600} tt="uppercase" ls={0.5}>{translate('Ref.#')}</Text>
                                </Grid.Col>
                            )}
                            <Grid.Col span={serialSettings && serialSettings.enabled ? 9.5 : 11}>
                                <Text c="dimmed" className={serialSettings && serialSettings.enabled ? '!pl-0' : '!pl-[30px]'} fz="xs" fw={600} tt="uppercase" ls={0.5}>{translate('Task Title')}</Text>
                            </Grid.Col>
                            <Grid.Col span={1.5}>
                                <Text c="dimmed" className="!pl-0" fz="xs" fw={600} tt="uppercase" ls={0.5}>{translate('Assigned')}</Text>
                            </Grid.Col>
                            <Grid.Col span={3}>
                                <Text c="dimmed" ta="center" fz="xs" fw={600} tt="uppercase" ls={0.5}>{translate('Due Date')}</Text>
                            </Grid.Col>
                            <Grid.Col span={2.5}>
                                <Text c="dimmed" ta="center" fz="xs" fw={600} tt="uppercase" ls={0.5}>{translate('Priority')}</Text>
                            </Grid.Col>
                            <Grid.Col span={2.5}>
                                <Text c="dimmed" ta="center" fz="xs" fw={600} tt="uppercase" ls={0.5}>{translate('Status')}</Text>
                            </Grid.Col>
                            <Grid.Col span={3.5} className="!pl-10">
                                <Text c="dimmed" fz="xs" fw={600} tt="uppercase" ls={0.5}>{translate('Tags')}</Text>
                            </Grid.Col>
                        </Grid>
                    </Grid.Col>
                </Grid>
            </div>
            <Box style={{ position: 'relative' }}>
                {projectInfo && projectInfo?.status_name === 'archived' && (
                    <>
                        <Overlay
                            blur={2}
                            opacity={0.7}
                            color="#fff"
                            zIndex={20}
                        />
                        <Box
                            style={{
                                position: 'absolute',
                                top: '50%',
                                left: '50%',
                                transform: 'translate(-50%, -50%)',
                                zIndex: 25, // Ensure it is above the overlay
                                textAlign: 'center',
                            }}
                        >
                            <Badge size="lg" leftSection={<IconArchive stroke={1.25} />} color="orange">{translate('This project is archived')}</Badge>
                        </Box>
                    </>
                )}
                <ScrollArea scrollbars={`y`} scrollbarSize={4}
                    className={`${appLocalizer?.is_admin ? 'h-[calc(100vh-330px)]' : 'h-[calc(100vh-283px)]'} pb-[1px] !pr-1`}
                >
                    <LoadingOverlay
                        visible={isLoading || isTasksLoading}
                        zIndex={1000}
                        overlayProps={{ radius: 'sm', blur: 4 }}
                    />
                    <div className="relative w-full">
                        <TaskListByMember />
                    </div>
                </ScrollArea>
            </Box>
        </Fragment>
    );
}

export default ProjectDetailsListByMember;