import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:quiosco_soler_2/catalogo/pages/catalogo_general.dart';
import 'package:quiosco_soler_2/catalogo/pages/comercial.dart';
import 'package:quiosco_soler_2/catalogo/pages/habitat.dart';
import 'package:quiosco_soler_2/catalogo/pages/industrial.dart';
import 'package:quiosco_soler_2/catalogo/pages/oem.dart';
import 'package:quiosco_soler_2/catalogo/providers/models_providers.dart';

class LateralMenuCatalogo extends StatefulWidget {
  final String position;
  final String? modelo;

  const LateralMenuCatalogo({Key? key, required this.position, this.modelo}) : super(key: key);

  @override
  State<LateralMenuCatalogo> createState() => _LateralMenuCatalogoState();
}

class _LateralMenuCatalogoState extends State<LateralMenuCatalogo> {
  final _modelosProvider = ModelosProvider();
  final List<String> habitat = [];
  final List<String> comercial = [];
  final List<String> industrial = [];
  final List<String> oem = [];
  final List<Widget> habitatWidget = [];
  final List<Widget> comercialWidget = [];
  final List<Widget> industrialWidget = [];
  final List<Widget> oemWidget = [];

  bool _isLoading = true;

  @override
  void initState() {
    super.initState();
    _modelosProvider.fetchModelos().then((modelos){
      bool imparHabitat = true;
      bool imparIndustrial = true;
      bool imparComercial = true;
      bool imparOEM = true;

      for(int i = 0; i < modelos.result!.length; i++){
        String modelo = modelos.result![i].modelo!;
        String linea = modelos.result![i].linea!;

        switch(linea){
          case "Hábitat":
            if(!habitat.contains(modelo)){
              habitat.add(modelo);
              habitatWidget.add(Container(
                decoration: BoxDecoration(
                  color: imparHabitat ? const Color(0x55CCCCCC) : Colors.transparent,
                ),
                child: ListTile(
                  title: Padding(
                    padding: const EdgeInsets.symmetric(vertical: 8.0),
                    child: Text(
                      modelo,
                      textAlign: TextAlign.center,
                      style: GoogleFonts.roboto(
                        color: Colors.black,
                        fontWeight: FontWeight.w300,
                        fontSize: 14.0,
                      ),
                    ),
                  ),
                  onTap: () => Navigator.push(context, MaterialPageRoute(
                    builder: (context) => Habitat(modelo: modelo, modelos: habitat),
                  )),
                ),
              ));
              imparHabitat = !imparHabitat;
            }
          break;
          case "Comercial":
            if(!comercial.contains(modelo)){
              comercial.add(modelo);
              comercialWidget.add(Container(
                decoration: BoxDecoration(
                  color: imparComercial ? const Color(0x55CCCCCC) : Colors.transparent,
                ),
                child: ListTile(
                  title: Padding(
                    padding: const EdgeInsets.symmetric(vertical: 8.0),
                    child: Text(
                      modelo,
                      textAlign: TextAlign.center,
                      style: GoogleFonts.roboto(
                        color: Colors.black,
                        fontWeight: FontWeight.w300,
                        fontSize: 14.0,
                      ),
                    ),
                  ),
                  onTap: () => Navigator.push(context, MaterialPageRoute(
                    builder: (context) => Comercial(modelo: modelo, modelos: comercial),
                  )),
                ),
              ));
              imparComercial = !imparComercial;
            }
          break;
          case "Industrial":
            if(!industrial.contains(modelo)){
              industrial.add(modelo);
              industrialWidget.add(Container(
                decoration: BoxDecoration(
                  color: imparIndustrial ? const Color(0x55CCCCCC) : Colors.transparent,
                ),
                child: ListTile(
                  title: Padding(
                    padding: const EdgeInsets.symmetric(vertical: 8.0),
                    child: Text(
                      modelo,
                      textAlign: TextAlign.center,
                      style: GoogleFonts.roboto(
                        color: Colors.black,
                        fontWeight: FontWeight.w300,
                        fontSize: 14.0,
                      ),
                    ),
                  ),
                  onTap: () => Navigator.push(context, MaterialPageRoute(
                    builder: (context) => Industrial(modelo: modelo, modelos: industrial),
                  )),
                ),
              ));
              imparIndustrial = !imparIndustrial;
            }
          break;
          case "OEM":
            if(!oem.contains(modelo)){
              oem.add(modelo);
              oemWidget.add(Container(
                decoration: BoxDecoration(
                  color: imparOEM ? const Color(0x55CCCCCC) : Colors.transparent,
                ),
                child: ListTile(
                  title: Padding(
                    padding: const EdgeInsets.symmetric(vertical: 8.0),
                    child: Text(
                      modelo,
                      textAlign: TextAlign.center,
                      style: GoogleFonts.roboto(
                        color: Colors.black,
                        fontWeight: FontWeight.w300,
                        fontSize: 14.0,
                      ),
                    ),
                  ),
                  onTap: () => Navigator.push(context, MaterialPageRoute(
                    builder: (context) => OEM(modelo: modelo, modelos: oem),
                  )),
                ),
              ));
              imparOEM = !imparOEM;
            }
          break;
        }
      }

      setState(() => _isLoading = false);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: [
          DrawerHeader(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Image.asset(
                  'assets/logo.png',
                  width: 64.0,
                ),
                const SizedBox(height: 8.0),
                const Text(
                  'CATÁLOGO DE PRODUCTOS',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontFamily: 'Helvetica Neue Black Cond',
                    fontSize: 18.0,
                    color: Colors.white,
                  ),
                ),
                const SizedBox(height: 16.0),
              ],
            ),
            decoration: const BoxDecoration(color: Color(0xFFFF0000)),
          ),
          if(_isLoading)
            const Center(
              child: CircularProgressIndicator(),
            ),
          if(!_isLoading)
            Column(
              children: [
                ListTile(
                  title: Padding(
                    padding: const EdgeInsets.symmetric(vertical: 8.0),
                    child: Text(
                      'Inicio',
                      textAlign: TextAlign.center,
                      style: GoogleFonts.roboto(
                        color: widget.position == 'index' ? Colors.red : Colors.black,
                        fontWeight: FontWeight.w300,
                        fontSize: 18.0,
                      ),
                    ),
                  ),
                ),
                const Divider(),
                ListTile(
                  title: Padding(
                    padding: const EdgeInsets.symmetric(vertical: 8.0),
                    child: Text(
                      'Catálogo general',
                      textAlign: TextAlign.center,
                      style: GoogleFonts.roboto(
                        color: widget.position == "cata" ? Colors.red : Colors.black,
                        fontWeight: FontWeight.w300,
                        fontSize: 18.0,
                      ),
                    ),
                  ),
                  onTap: () => Navigator.push(context, MaterialPageRoute(
                    builder: (context) => CatalogoGeneral(),
                  )),
                ),
                const Divider(),
                ExpansionTile(
                  title: Padding(
                    padding: const EdgeInsets.symmetric(vertical: 8.0),
                    child: Text(
                      'Hábitat',
                      textAlign: TextAlign.center,
                      style: GoogleFonts.roboto(
                        color: widget.position == "habitat" ? Colors.red : Colors.black,
                        fontWeight: FontWeight.w300,
                        fontSize: 18.0,
                      ),
                    ),
                  ),
                  children: habitatWidget,
                ),
                const Divider(),
                ExpansionTile(
                  title: Padding(
                    padding: const EdgeInsets.symmetric(vertical: 8.0),
                    child: Text(
                      'Comercial',
                      textAlign: TextAlign.center,
                      style: GoogleFonts.roboto(
                        color: widget.position == "comercial" ? Colors.red : Colors.black,
                        fontWeight: FontWeight.w300,
                        fontSize: 18.0,
                      ),
                    ),
                  ),
                  children: comercialWidget,
                ),
                const Divider(),
                ExpansionTile(
                  title: Padding(
                    padding: const EdgeInsets.symmetric(vertical: 8.0),
                    child: Text(
                      'Industrial',
                      textAlign: TextAlign.center,
                      style: GoogleFonts.roboto(
                        color: widget.position == "industrial" ? Colors.red : Colors.black,
                        fontWeight: FontWeight.w300,
                        fontSize: 18.0,
                      ),
                    ),
                  ),
                  children: industrialWidget,
                ),
                const Divider(),
                ExpansionTile(
                  title: Padding(
                    padding: const EdgeInsets.symmetric(vertical: 8.0),
                    child: Text(
                      'OEM',
                      textAlign: TextAlign.center,
                      style: GoogleFonts.roboto(
                        color: widget.position == "oem" ? Colors.red : Colors.black,
                        fontWeight: FontWeight.w300,
                        fontSize: 18.0,
                      ),
                    ),
                  ),
                  children: oemWidget,
                ),
                const Divider(),
                ExpansionTile(
                  title: Padding(
                    padding: const EdgeInsets.symmetric(vertical: 8.0),
                    child: Text(
                      'Recuperadores de energía',
                      textAlign: TextAlign.center,
                      style: GoogleFonts.roboto(
                        color: widget.position == "recuperadores" ? Colors.red : Colors.black,
                        fontWeight: FontWeight.w300,
                        fontSize: 18.0,
                      ),
                    ),
                  ),
                  children: <Widget>[
                    Container(
                      color: const Color(0x55CCCCCC),
                      child: ListTile(
                        title: Padding(
                          padding: const EdgeInsets.symmetric(vertical: 8.0),
                          child: Text(
                            "Unidades de ventilación para recuperación de energía",
                            textAlign: TextAlign.center,
                            style: GoogleFonts.roboto(
                              color: Colors.black,
                              fontWeight: FontWeight.w300,
                              fontSize: 14.0,
                            ),
                          ),
                        ),
                        onTap: () => Navigator.pushNamed(context, 'ener'),
                      ),
                    )
                  ],
                ),
                const Divider(),
                ExpansionTile(
                  title: Padding(
                    padding: const EdgeInsets.symmetric(vertical: 8.0),
                    child: Text(
                      'APL',
                      textAlign: TextAlign.center,
                      style: GoogleFonts.roboto(
                        color: widget.position == "apl" ? Colors.red : Colors.black,
                        fontWeight: FontWeight.w300,
                        fontSize: 18.0,
                      ),
                    ),
                  ),
                  children: <Widget>[
                    Container(
                      color: const Color(0x55CCCCCC),
                      child: ListTile(
                        title: Padding(
                          padding: const EdgeInsets.symmetric(vertical: 8.0),
                          child: Text(
                            "División APL",
                            textAlign: TextAlign.center,
                            style: GoogleFonts.roboto(
                              color: Colors.black,
                              fontWeight: FontWeight.w300,
                              fontSize: 14.0,
                            ),
                          ),
                        ),
                        onTap: () => Navigator.pushNamed(context, 'apl'),
                      ),
                    )
                  ],
                ),
              ],
            )
        ],
      ),
    );
  }
}
