import * as React from 'react';
import { Group, Text, Tooltip } from '@mantine/core';
import { useMemo } from 'react';
import { tableColumns } from '@index/components/Tests/Table/tableColumns';
import { StatusesRing } from '@shared/components/Tests/StatusesRing';

interface Props {
    type: string
    test: any
}

export function Status({ type, test }: Props) {
    const checkStatuses: string[] = useMemo(
        () => {
            if (test.checks && test.checks.length > 0) {
                return test.checks.map((check: any) => check.status[0]);
            }
            return [];
        },
        [JSON.stringify(test)],
    );
    return (
        <td
            key={type}
            title={test.level}
            data-test={`table-row-${tableColumns[type].label}`}
            style={{
                ...tableColumns[type].cellStyle,
                paddingLeft: '2px',
            }}
        >
            <Group justify="flex-start" gap={0} wrap="nowrap">
                <StatusesRing
                    statuses={checkStatuses.length > 0 ? checkStatuses : [test.status]}
                    name={test.name}
                    key={type}
                    ml={-4}
                />
                <Tooltip label={test[type]} multiline withinPortal>
                    <Text
                        lineClamp={1}
                        style={{
                            wordBreak: 'break-all',
                            fontSize: '13px',
                            lineHeight: '18px',
                            letterSpacing: '-0.01em',
                            fontFamily: '"Roboto","Arial",sans-serif',
                        }}
                    >
                        {test.status}
                    </Text>
                </Tooltip>
            </Group>
        </td>
    );
}