import React, { useMemo } from 'react';
import { Box, Stack, Typography } from '@mui/material';
import { useNavigate } from 'react-router-dom';
import TableCard from '../TableCard/TableCard';
import { toast } from 'react-toastify';

const TablesList = ({
  filteredTables,
  query,
  basePath = '/table',
  formInfo,
  isProject = false,
}) => {
  const navigate = useNavigate();

  const handleNavigate = (path) => {
    navigate(path);
  };

  const renderTableCard = (table, formInfo) => {
    //пока нет ручки
    if (!formInfo){
      return;
    }
    const path = `${basePath}/form/${formInfo.id}/form-type/${isProject ? 'PROJECT' : formInfo.form_type_code}/${table.sheet}/${table?.direction}/${table?.year}`;

    return (
      <TableCard
        key={table.sheet+"_"+table?.direction}
        onNavigate={() => handleNavigate(path)}
        table={table}
      />
    );
  };

  return (
    <Box
      sx={{
        overflow: 'auto',
        display: 'flex',
        flexDirection: 'column',
        gap: '1rem',
        maxHeight: 'calc(100vh - 14rem)'
      }}
    >
      {filteredTables.length === 0 && (
        <Box
          sx={{
            fontSize: '0.875rem',
            color: '#6B7280' // gray-500 equivalent
          }}
        >
          {query
            ? 'Ничего не найдено'
            : 'Нет таблиц. Создайте новую, чтобы начать.'}
        </Box>
      )}

      {filteredTables.map(
        (table) => renderTableCard(table, formInfo),
      )}
    </Box>
  );
};

export default TablesList;