import React, { lazy, Suspense } from "react";

const PrometheusChart = lazy(() => import('../../Charts/PrometheusChart'));

// Функция для генерации названия метрики на основе id
const getMetricName = (id) => {
  return `zvks_apiforsnmp_measure_${id}`;
};

//!!!!!!!!!!Пофиксить вкладуи с eth4, во всех eth 1-4 открывается именно 4 !!!!!!!!!!!!!

// Функция для рекурсивного сбора всех id потомков
const getAllChildIds = (node) => {
  let ids = [];
  if (node.id) {
    ids.push(node.id); // Добавляем id текущего узла
  }
  if (node.items && node.items.length > 0) {
    node.items.forEach((child) => {
      ids = ids.concat(getAllChildIds(child)); // Рекурсивно собираем id потомков
    });
  }
  return ids;
};

const tabContent = (data) => {
  const tabContent = {};

  // Функция для рекурсивного обхода и сбора данных
  const generateContent = (nodes) => {
    nodes.forEach((node) => {
      // Если у узла есть вложенные элементы, рекурсивно обрабатываем их
      if (node.items && node.items.length > 0) {
        // Создаем контент для родителя
        const childrenContent = generateContent(node.items);

        const content = (
          <div>
            <h2>{node.title}</h2>
            <p>Контент для {node.title}.</p>
            {childrenContent}
          </div>
        );

        // Сохраняем контент для текущего id
        tabContent[node.id] = {
          title: node.title,
          content: content,
        };
      } else {
        // Если у узла нет вложенных элементов, это самый нижний уровень
        const metricName = getMetricName(node.id);
        const content = (
          <div key={node.id}>
            <h3>{node.title}</h3> {/* Используем title узла */}
            <Suspense fallback={<div>Загрузка графика...</div>}>
              <PrometheusChart metricName={metricName} />
            </Suspense>
          </div>
        );

        // Сохраняем контент для текущего id
        tabContent[node.id] = {
          title: node.title,
          content: content,
        };
      }
    });

    // Возвращаем контент для всех потомков
    return (
      <div>
        {nodes.map((node) => (
          <div key={node.id}>{tabContent[node.id].content}</div>
        ))}
      </div>
    );
  };

  // Начинаем обработку с корневого уровня
  if (data.items && data.items.length > 0) {
    generateContent(data.items);
  } else {
    console.warn("Данные отсутствуют или массив items пуст");
  }

  return tabContent;
};

export default tabContent;