import { useEffect } from 'react';
import { Box, Card, Center, Flex, Group, Loader, ScrollArea, Text, ThemeIcon } from '@mantine/core';
import { IconClockHour4 } from '@tabler/icons-react';
import { useSelector, useDispatch } from 'react-redux';
import TaskListContent from "./TaskListContent";
import { fetchRecentOpenTasksByUser } from "../Settings/store/myTaskSlice";
import { __ } from "@wordpress/i18n";

// Dashboard "Recent Tasks" widget — the user's 10 most-recently-created open
// tasks where they are the creator or the assignee. Refetched on each mount so
// a dashboard visit always reflects newly created/assigned tasks. The card
// hugs its list (ScrollArea.Autosize) instead of filling the grid cell, so a
// short list never leaves dead white space inside the card; a long list caps at
// mah and scrolls.
const RecentOpenTasks = ({ dragHandle }) => {
    const dispatch = useDispatch();
    const { recentOpenTasks, recentOpenLoading } = useSelector((state) => state.settings.myTask);
    const { loggedInUser } = useSelector((state) => state.auth.session);
    const { loggedUserId } = useSelector((state) => state.auth.user);
    const userId = loggedInUser?.loggedUserId ?? loggedUserId;

    useEffect(() => {
        if (userId) {
            dispatch(fetchRecentOpenTasksByUser({ id: userId }));
        }
    }, [dispatch, userId]);

    const isFirstLoad = recentOpenLoading && (!recentOpenTasks || recentOpenTasks.length === 0);

    return (
        <Card padding={0} withBorder radius="md" style={{ overflow: 'hidden' }}>
            <Box className={`bg-[#F9D7BF] ${dragHandle ? 'draggable-header cursor-grab' : ''}`} px="md" py="xs">
                <Group gap="xs" wrap="nowrap">
                    {dragHandle}
                    <ThemeIcon size="sm" radius="sm" variant="light" color="#ED7D31">
                        <IconClockHour4 size={14} />
                    </ThemeIcon>
                    <Text fw={600} size="sm">{__( 'Recent Tasks', 'lazytasks-project-task-management' )}</Text>
                </Group>
            </Box>
            {isFirstLoad ? (
                <Center mih={120}><Loader size="sm" color="#ED7D31" /></Center>
            ) : (recentOpenTasks && recentOpenTasks.length > 0) ? (
                <ScrollArea.Autosize mah={420} scrollbarSize={4}>
                    <TaskListContent tasks={recentOpenTasks} header={__( 'Recent Tasks', 'lazytasks-project-task-management' )} />
                </ScrollArea.Autosize>
            ) : (
                <Flex align="center" justify="center" mih={120}>
                    <Text c="dimmed" size="sm">{__( 'No Task Found', 'lazytasks-project-task-management' )}</Text>
                </Flex>
            )}
        </Card>
    );
};

export default RecentOpenTasks;