import { useParams } from 'react-router-dom';
import { useApiDocumentation, useDataPage } from "../../API/hooks.ts";
import { FieldInfo } from "../../types/common.ts";

export function DataPage() {
    const { applicationName, endpointName } = useParams<{ applicationName: string; endpointName: string }>();

    // Получаем схему документации API
    const { schema, loading: loadingSchema } = useApiDocumentation(applicationName || "", endpointName || "");

    // Получаем данные с помощью пагинации
    const dataPage = useDataPage(applicationName || "", endpointName || "", {}, !loadingSchema);

    // Функция для экспорта данных в Excel (пока пустая)
    const handleExport = () => {
        // Логика для экспорта данных
    };

    // Функция для добавления новых данных (пока пустая)
    const handleAdd = () => {
        // Логика для добавления данных
    };

    // Функция для фильтрации данных (пока пустая)
    const handleFilters = () => {
        // Логика для фильтрации данных
    };

    // Если данные или схема загружаются, отображаем загрузку
    if (loadingSchema) {
        return <div className="loading">Загрузка схемы...</div>;
    }

    return (
        <div className="data-page">
            <div className="buttons-container">
                <button className="export-excel-button" onClick={handleExport}>Экспорт в Excel</button>
                <button className="add-button" onClick={handleAdd}>Добавление</button>
                <button className="filters-button" onClick={handleFilters}>Фильтры</button>
            </div>
            <div className="table-container">
                <table className="data-table" style={{ overflowX: 'auto', display: 'block' }}>
                    <thead>
                    <tr>
                        {schema?.map((field: FieldInfo) => (
                            <th key={field.name} className="column-header">
                                {field.title}
                            </th>
                        ))}
                    </tr>
                    </thead>
                    <tbody>
                    {dataPage.items && dataPage.items.length > 0 ? (
                        dataPage.items.map((item: unknown) => (
                            <tr key={item.id}>
                                {schema?.map((field: FieldInfo) => (
                                    <td key={field.name} className="data-cell">
                                        {item[field.name] || "-"}
                                    </td>
                                ))}
                            </tr>
                        ))
                    ) : (
                        <tr>
                            <td colSpan={schema?.length} className="no-data">
                                Нет данных для отображения
                            </td>
                        </tr>
                    )}
                    </tbody>
                </table>
            </div>
        </div>
    );
}