import React from "react";
import "../../Style/TreeTable.css";
import { getStatusColor } from "../TreeChart/dataUtils"; // Импортируем функцию

const TreeTable = ({ data }) => {
    // Фильтруем данные, чтобы убрать "Функциональные задачи"
    const filteredData = data.filter((item) => item.title !== "Функциональные задачи");

    return (
        <div className="table-container">
            <table className="tree-table">
                <thead>
                    {/* Первый уровень: Заголовки "Медиа сервер" */}
                    <tr>
                        {filteredData.map((item, index) => (
                            <th key={index} colSpan="2" className="tree-table-header" style={{ backgroundColor: getStatusColor(item.status) }}>
                                {item.title}
                            </th>
                        ))}
                    </tr>
                    {/* Второй уровень: "АО" и "ПО" */}
                    <tr>
                        {filteredData.map((item, index) => (
                            <React.Fragment key={index}>
                                <td className="tree-table-subheader" style={{ backgroundColor: getStatusColor(item.items[0]?.status) }}>
                                    АО
                                </td>
                                <td className="tree-table-subheader" style={{ backgroundColor: getStatusColor(item.items[1]?.status) }}>
                                    ПО
                                </td>
                            </React.Fragment>
                        ))}
                    </tr>
                </thead>
                <tbody>
                    {/* Третий уровень: Вложенные элементы "АО" и "ПО" */}
                    {renderRows(filteredData)}
                </tbody>
            </table>
        </div>
    );
};

// Функция для отображения строк с вложенными элементами
const renderRows = (data) => {
    const rows = [];

    // Находим максимальное количество элементов среди всех "АО" и "ПО"
    const maxItems = Math.max(
        ...data.flatMap((item) => [
            item.items[0]?.items?.length || 0, // АО
            item.items[1]?.items?.length || 0  // ПО
        ])
    );

    // Генерируем строки
    for (let i = 0; i < maxItems; i++) {
        rows.push(
            <tr key={i} className="tree-table-row">
                {data.map((item, index) => (
                    <React.Fragment key={index}>
                        <td className="tree-table-cell" style={{ backgroundColor: getStatusColor(item.items[0]?.items[i]?.status) }}>
                            {item.items[0]?.items[i]?.title || ""}
                        </td>
                        <td className="tree-table-cell" style={{ backgroundColor: getStatusColor(item.items[1]?.items[i]?.status) }}>
                            {item.items[1]?.items[i]?.title || ""}
                        </td>
                    </React.Fragment>
                ))}
            </tr>
        );
    }

    return rows;
};
export default TreeTable;