import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:flutter_project/BloC/DataService.dart';
import 'package:html/parser.dart' as htmlParser;
import 'package:flutter_project/BloC/contenedores_event.dart';
import 'package:flutter_project/bars/app_bar';
import 'package:flutter_project/widgets/background_widget.dart'; 
import 'package:flutter_project/bars/bottom_bar';

class EmbalsesPage extends StatefulWidget {
  const EmbalsesPage({Key? key}) : super(key: key);

  @override
  _EmbalsesPageState createState() => _EmbalsesPageState();
}

class _EmbalsesPageState extends State<EmbalsesPage> {
  final DataService dataService = DataService();
  List<Map<String, dynamic>> embalsesData = [];
  List<String> descripciones = ['Cota (m)', 'Volumen (Hm3)', 'Entrada (l/s)', 'Salida (l/s)'];

  @override
  void initState() {
    super.initState();
    obtenerDatos();
  }

  Future<void> obtenerDatos() async {
    try {
      final data = await dataService.obtenerDatos();
      setState(() {
        embalsesData = data;
      });
    } catch (e) {
      print('Error: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const CustomAppBar(),
      body: BackgroundWidget(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: ListView.builder(
            itemCount: embalsesData.length,
            itemBuilder: (context, index) {
              final embalseData = embalsesData[index];
              final nombreEmbalse = embalseData['nombre'];
              final listaElementos = embalseData['elementos'];

              return Padding(
                padding: const EdgeInsets.only(bottom: 8.0),
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.white.withOpacity(0.5),
                    borderRadius: BorderRadius.circular(10.0),
                  ),
                  child: Column(
                    children: [
                      Row(
                        children: [
                          Expanded(
                            child: Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Text(
                                nombreEmbalse!,
                                style: const TextStyle(
                                  fontSize: 25.0,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                      Row(
                        children: [
                          Expanded(
                            child: Padding(
                              padding: const EdgeInsets.symmetric(horizontal: 8.0),
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: List.generate(
                                  listaElementos.length,
                                  (index) => Text(
                                    '${descripciones[index]}: ${listaElementos[index]}',
                                    style: const TextStyle(
                                      fontWeight: FontWeight.normal,
                                      fontSize: 20.0,
                                    ),
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              );
            },
          ),
        ),
      ),
      bottomNavigationBar: const CustomBottomBar(),
    );
  }
}