import React from 'react';

import {Flex} from '@gravity-ui/uikit';

import {EmptyState} from '../../../../components/EmptyState';
import type {IssuesTree} from '../../../../store/reducers/healthcheckInfo/types';
import {uiFactory} from '../../../../uiFactory/uiFactory';
import {getIllustration} from '../../../../utils/illustrations';
import {useTenantQueryParams} from '../../useTenantQueryParams';
import i18n from '../i18n';
import {countHealthcheckIssuesByCategory, resolveHealthcheckView} from '../utils';

import {HealthcheckIssue} from './HealthcheckIssue';

interface IssuesProps {
    issues: IssuesTree[];
    targetIssueId?: string;
    targetLeafIssueId?: string;
    targetLeafIssueRef?: React.Ref<HTMLDivElement>;
}

export function Issues({
    issues,
    targetIssueId,
    targetLeafIssueId,
    targetLeafIssueRef,
}: IssuesProps) {
    const SuccessImage = getIllustration('SuccessOperation');

    const {view, issuesFilter} = useTenantQueryParams();

    const activeView = React.useMemo(() => {
        const issuesCount = countHealthcheckIssuesByCategory(issues);
        return resolveHealthcheckView(
            view,
            issuesCount,
            uiFactory.healthcheck.getHealthcheckViewsOrder(),
        );
    }, [issues, view]);

    const filteredIssues = React.useMemo(() => {
        const normalizedFilter = issuesFilter?.toLowerCase().trim();
        if (!normalizedFilter) {
            return issues;
        }
        return issues.filter((issue) => {
            const stack = Object.values(issue);
            while (stack.length) {
                const value = stack.pop();
                if (typeof value === 'object') {
                    stack.push(...Object.values(value));
                } else if (String(value).toLowerCase().includes(normalizedFilter)) {
                    return true;
                }
            }
            return false;
        });
    }, [issues, issuesFilter]);

    const filteredIssuesCurrentView = React.useMemo(
        () =>
            activeView ? filteredIssues.filter((issue) => issue.categoryForUI === activeView) : [],
        [activeView, filteredIssues],
    );

    if (filteredIssuesCurrentView.length === 0) {
        return (
            <Flex grow={1} justifyContent="center" alignItems="center">
                <EmptyState
                    image={<SuccessImage width={100} height={100} />}
                    position="center"
                    size="xs"
                    title={i18n('label_no-issues')}
                    description={i18n('description_no-issues')}
                />
            </Flex>
        );
    }

    return filteredIssuesCurrentView.map((issue) => (
        <HealthcheckIssue
            issue={issue}
            key={`${issue.id}:${Boolean(issuesFilter)}:${
                issue.id === targetLeafIssueId ? targetIssueId : ''
            }`}
            expanded={Boolean(issuesFilter)}
            targeted={issue.id === targetLeafIssueId}
            targetIssueId={issue.id === targetLeafIssueId ? targetIssueId : undefined}
            targetRef={issue.id === targetLeafIssueId ? targetLeafIssueRef : undefined}
        />
    ));
}