import React, { lazy, Suspense } from "react";
import Skeleton from '@mui/material/Skeleton';
import Box from '@mui/material/Box';

const PrometheusChart = lazy(() => import('../../Charts2/PrometheusChart'));
import LazyChartBatchRenderer from "../hooks/LazyChartBatchRender";

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

const getAllChildIds = (node) => {
  let ids = [];
  if (node.id) {
    ids.push(node.id); 
  }
  if (node.items && node.items.length > 0) {
    node.items.forEach((child) => {
      ids = ids.concat(getAllChildIds(child)); 
    });
  }
  return ids;
};

// Компонент Skeleton для графика
const ChartSkeleton = () => (
  <Box sx={{ width: '100%' }}>
    <Skeleton variant="text" width="60%" height={30} /> 
    <Skeleton variant="rectangular" width="100%" height={300} sx={{ mt: 2 }} /> 
  </Box>
);

// Компонент Skeleton для родительского контейнера
const ContainerSkeleton = () => (
  <Box sx={{ width: '100%' }}>
    <Skeleton variant="text" width="40%" height={40} /> {/* Заголовок */}
    <Skeleton variant="text" width="80%" height={20} sx={{ mt: 1 }} /> 
    <Box sx={{ mt: 2 }}>
      {[...Array(3)].map((_, i) => (
        <ChartSkeleton key={i} />
      ))}
    </Box>
  </Box>
);

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>
            <Suspense fallback={<ContainerSkeleton />}>
              <LazyChartBatchRenderer charts={node.items.map((child) => tabContent[child.id].content)} />
            </Suspense>
            <p>Контент для {node.title}.</p>
          </div>
        );

        tabContent[node.id] = {
          title: node.title,
          content: content,
        };
      } else {
        const metricName = getMetricName(node.id);
        const content = (
          <div key={node.id}>
            <h3>{node.title}</h3>
            <Suspense fallback={<ChartSkeleton />}>
              <PrometheusChart metricName={metricName} />
            </Suspense>
          </div>
        );
        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;