import React from 'react';
import TaskBoard from "./TasksElements/TaskBoard";
import { Badge, Box, LoadingOverlay, Overlay, ScrollArea } from "@mantine/core";
import { useSelector } from "react-redux";
import { IconArchive } from '@tabler/icons-react';
import { translate } from '../../../utils/i18n';

const ProjectDetailsBoard = ({ groupByType, columnLabels }) => {

    const { isLoading, projectInfo } = useSelector((state) => state.settings.task);

    return (
        <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 scrollbarSize={4}
                className={`${appLocalizer?.is_admin ? 'h-[calc(100vh-292px)]' : 'h-[calc(100vh-244px)]'}`}
            >
                {isLoading &&
                    <LoadingOverlay
                        visible={isLoading}
                        zIndex={1000}
                        overlayProps={{ radius: 'sm', blur: 4 }}
                    />
                }

                <div className="relative w-full pt-2 pb-0">
                    <TaskBoard groupByType={groupByType} columnLabels={columnLabels} />
                </div>
            </ScrollArea>
        </Box>
    );
};

export default ProjectDetailsBoard;