/* eslint-disable no-underscore-dangle */
import * as React from 'react';
import { Group, List, Loader, Stack, Text, Tooltip } from '@mantine/core';
import * as dateFns from 'date-fns';
import { useCallback, useEffect, useRef, useState } from 'react';
import { useDisclosure } from '@mantine/hooks';
import RemoveItemModalAsk from '@index/components/Navbar/Items/RemoveItemModalAsk';
import { StatusesRing } from '@shared/components/Tests/StatusesRing';
import { RemoveItemPopover } from '@index/components/Navbar/Items/RemoveItemPopover';

interface Props {
    item: { [key: string]: string }
    index: number
    className: string
    handlerItemClick: any
    infinityQuery: any
    type: string
    testsStatuses?: string[]
    statusesLoaded?: boolean
}

export const RunItem = React.memo(function RunItem(
    {
        item,
        type,
        index,
        className,
        infinityQuery,
        handlerItemClick,
        testsStatuses = [],
        statusesLoaded = false,
    }: Props,
) {
    const [modalOpen, setModalOpen] = useState(false);
    const [opened, { toggle, close }] = useDisclosure(false);

    const handleRemoveItemClick = () => {
        setModalOpen(true);
        close();
    };

    // Mantine 7 List.Item does not forward onClick to DOM.
    // Use ref + native listener as workaround.
    const itemRef = useRef<HTMLLIElement>(null);
    const handlerRef = useRef(handlerItemClick);
    handlerRef.current = handlerItemClick;

    useEffect(() => {
        const el = itemRef.current;
        if (!el) return;
        const handler = (e: MouseEvent) => handlerRef.current(e);
        el.addEventListener('click', handler);
        return () => el.removeEventListener('click', handler);
    }, []);

    return (
        <>
            <List.Item
                ref={itemRef}
                data-test={`navbar_item_${index}`}
                data-item-name={item.name}
                className={className}
                style={{ cursor: 'pointer', width: '100%' }}
            >
                <Group
                    wrap="nowrap"
                    pl={8}
                    justify="space-between"
                    gap={0}
                    style={{ paddingTop: 4, paddingBottom: 4 }}
                >
                    <Group style={{ width: '100%' }} wrap="nowrap">
                        <Stack gap={0} style={{ width: '100%' }}>
                            <Group justify="flex-start" style={{ width: '100%' }}>
                                <Tooltip label={item.name} multiline withinPortal>
                                    <Text
                                        component="span" data-test="navbar-item-name"
                                        fz={16}
                                        lineClamp={1}
                                        style={{ wordBreak: 'break-all' }}
                                    >
                                        {item.name}
                                    </Text>
                                </Tooltip>
                            </Group>

                            <Group justify="flex-end">
                                <Tooltip
                                    withinPortal
                                    label={
                                        dateFns.format(dateFns.parseISO(item.createdDate), 'yyyy-MM-dd HH:mm:ss')
                                    }
                                >
                                    <Text
                                        ta="right"
                                        size="xs"
                                        c="dimmed"
                                    >
                                        {
                                            dateFns.formatDistanceToNow(
                                                dateFns.parseISO(item.createdDate),
                                            )
                                        }
                                    </Text>
                                </Tooltip>
                            </Group>
                        </Stack>

                    </Group>
                    <Group justify="flex-end" gap={0} wrap="nowrap">
                        {
                            !statusesLoaded
                                ? (<Loader variant="dots" color="blue" size="xs" mr={16} />)
                                : (<StatusesRing statuses={testsStatuses} name={item.name} />)
                        }
                        <RemoveItemPopover
                            handleRemoveItemClick={handleRemoveItemClick}
                            type={type}
                            opened={opened}
                            toggle={toggle}
                        />
                    </Group>
                </Group>
            </List.Item>
            <RemoveItemModalAsk
                opened={modalOpen}
                setOpened={setModalOpen}
                infinityQuery={infinityQuery}
                item={item}
                type={type}
            />
        </>
    );
});