import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:localstore/localstore.dart';

import '../providers/models_providers.dart';
import '../widgets/lateral_menu_catalogo.dart';
import 'comercial.dart';
import 'habitat.dart';
import 'industrial.dart';
import 'oem.dart';

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

  @override
  State<IndexCatalogo> createState() => _IndexCatalogoState();
}

class _IndexCatalogoState extends State<IndexCatalogo> {
  final _scaffoldKey = GlobalKey<ScaffoldState>();
  final _modelosProvider = ModelosProvider();
  final List<String> habitat = [];
  final List<String> comercial = [];
  final List<String> industrial = [];
  final List<String> oem = [];
  final db = Localstore.instance;

  bool _isLoading = true;

  @override
  void initState() {
    super.initState();
    _modelosProvider.fetchModelos().then((modelos){
      for(int i = 0; i < modelos.result!.length; i++){
        switch(modelos.result![i].linea){
          case "Hábitat":
            if(!habitat.contains(modelos.result![i].modelo)) habitat.add(modelos.result![i].modelo!);
          break;
          case "Comercial":
            if(!comercial.contains(modelos.result![i].modelo)) comercial.add(modelos.result![i].modelo!);
          break;
          case "Industrial":
            if(!industrial.contains(modelos.result![i].modelo)) industrial.add(modelos.result![i].modelo!);
          break;
          case "OEM":
            if(!oem.contains(modelos.result![i].modelo)) oem.add(modelos.result![i].modelo!);
          break;
        }
      }

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

  @override
  Widget build(BuildContext context) {
    final _screenSize = MediaQuery.of(context).size;
    return Scaffold(
      key: _scaffoldKey,
      drawer: _isLoading ? null : const LateralMenuCatalogo(
        position: 'index',
      ),
      appBar: _isLoading ? null : AppBar(
        automaticallyImplyLeading: false,
        backgroundColor: Colors.white,
        centerTitle: true,
        title: Row(
          children: [
            Image.asset(
              'assets/logo.png',
              width: 32.0,
            ),
            const SizedBox(width: 8.0),
            TextButton(
              style: TextButton.styleFrom(
                padding: EdgeInsets.zero,
                tapTargetSize: MaterialTapTargetSize.shrinkWrap,
                minimumSize: const Size(0.0, 0.0),
              ),
              child: const Icon(
                Icons.menu,
                color: Color(0xFFFF0000),
              ),
              onPressed: () => _scaffoldKey.currentState!.openDrawer(),
            ),
            const Expanded(
              child: Text(
                'PRODUCTO',
                textAlign: TextAlign.center,
                style: TextStyle(
                  color: Colors.red,
                  fontFamily: 'Helvetica Neue Black Cond',
                ),
              ),
            ),
            const SizedBox(width: 32.0),
            TextButton(
              style: TextButton.styleFrom(
                padding: EdgeInsets.zero,
                tapTargetSize: MaterialTapTargetSize.shrinkWrap,
                minimumSize: const Size(0.0, 0.0),
              ),
              child: const Icon(
                Icons.close,
                color: Color(0xFFFF0000),
              ),
              onPressed: () => Navigator.pop(context),
            ),
          ],
        ),
      ),
      body: _isLoading ? const Center(
        child: CircularProgressIndicator(),
      ) : SingleChildScrollView(
        child: Column(
          children: [
            Container(
              width: _screenSize.width*0.9,
              margin: EdgeInsets.symmetric(horizontal: _screenSize.width*0.05, vertical: 8.0),
              child: Text(
                'Explora nuestros sistemas de ventilación',
                style: GoogleFonts.robotoSlab(
                  fontWeight: FontWeight.w400,
                  fontSize: 24.0,
                ),
              ),
            ),
            Container(
              width: _screenSize.width*0.9,
              margin: EdgeInsets.symmetric(horizontal: _screenSize.width*0.05),
              child: Text(
                'Características completas, documentación técnica y toda la información que necesitas.',
                style: GoogleFonts.roboto(
                  fontSize: 16.0,
                ),
              ),
            ),
            const SizedBox(height: 8.0),
            TextButton(
              style: TextButton.styleFrom(
                padding: EdgeInsets.zero,
                tapTargetSize: MaterialTapTargetSize.shrinkWrap,
                minimumSize: const Size(0.0, 0.0),
              ),
              child: Container(
                width: _screenSize.width,
                alignment: Alignment.center,
                child: Stack(
                  children: <Widget>[
                    Image.asset(
                      'assets/habitat.jpg',
                      width: _screenSize.width,
                      fit: BoxFit.cover,
                    ),
                    Positioned(
                      bottom: 44.0,
                      left: 22.0,
                      child: Text(
                        'División Hábitat',
                        style: GoogleFonts.robotoSlab(
                          fontSize: 16.0,
                          color: Colors.white,
                          shadows: <Shadow>[
                            const Shadow(
                              offset: Offset(1.0, 1.0),
                              blurRadius: 3.0,
                              color: Colors.black87
                            ),
                          ],
                        ),
                      ),
                    )
                  ],
                ),
              ),
              onPressed: () {
                List<Widget> habChil = [];

                habitat.forEach((element) {
                  habChil.add(TextButton(
                    child: Text(
                      element,
                      textAlign: TextAlign.center,
                      style: GoogleFonts.roboto(
                        fontSize: 16.0,
                        color: Colors.black,
                      ),
                    ),
                    onPressed: () => Navigator.push(context, MaterialPageRoute(
                      builder: (context) => Habitat(
                        modelo: element,
                        modelos: habitat,
                      ),
                    )),
                  ));
                });

                showDialog(
                  context: context,
                  barrierDismissible: true,
                  builder: (context) => AlertDialog(
                    title: Text(
                      'Selecciona un producto',
                      textAlign: TextAlign.center,
                      style: GoogleFonts.roboto(
                        fontSize: 20.0,
                        fontWeight: FontWeight.bold,
                        color: const Color.fromRGBO(180, 4, 4, 2),
                      ),
                    ),
                    content: SingleChildScrollView(
                      child: Column(
                        children: habChil,
                      ),
                    ),
                    actions: <Widget>[
                      TextButton(
                        child: Text(
                          'Cancelar',
                          style: GoogleFonts.roboto(),
                        ),
                        onPressed: () => Navigator.pop(context),
                      ),
                    ],
                  ),
                );
              },
            ),
            TextButton(
              style: TextButton.styleFrom(
                padding: EdgeInsets.zero,
                tapTargetSize: MaterialTapTargetSize.shrinkWrap,
                minimumSize: const Size(0.0, 0.0),
              ),
              child: Container(
                width: _screenSize.width,
                alignment: Alignment.center,
                child: Stack(
                  children: <Widget>[
                    Image.asset(
                      'assets/comercial.jpg',
                      width: _screenSize.width,
                      fit: BoxFit.cover,
                    ),
                    Positioned(
                      bottom: 44.0,
                      left: 22.0,
                      child: Text(
                        'División Comercial',
                        style: GoogleFonts.robotoSlab(
                          fontSize: 16.0,
                          color: Colors.white,
                          shadows: <Shadow>[
                            const Shadow(
                              offset: Offset(1.0, 1.0),
                              blurRadius: 3.0,
                              color: Colors.black87,
                            )
                          ],
                        ),
                      ),
                    )
                  ],
                ),
              ),
              onPressed: () {
                List<Widget> comChil = [];

                comercial.forEach((element) {
                  comChil.add(TextButton(
                    child: Text(
                      element,
                      textAlign: TextAlign.center,
                      style: GoogleFonts.roboto(
                        fontSize: 16.0,
                        color: Colors.black,
                      ),
                    ),
                    onPressed: () => Navigator.push(context, MaterialPageRoute(
                      builder: (context) => Comercial(
                        modelo: element,
                        modelos: comercial,
                      ),
                    )),
                  ));
                });

                showDialog(
                  context: context,
                  barrierDismissible: true,
                  builder: (context) => AlertDialog(
                    title: Text(
                      'Selecciona un producto',
                      textAlign: TextAlign.center,
                      style: GoogleFonts.roboto(
                        fontSize: 20.0,
                        fontWeight: FontWeight.bold,
                        color: const Color.fromRGBO(180, 4, 4, 2),
                      ),
                    ),
                    content: SingleChildScrollView(
                      child: Column(
                        children: comChil,
                      ),
                    ),
                    actions: <Widget>[
                      TextButton(
                        child: Text(
                          'Cancelar',
                          style: GoogleFonts.roboto(),
                        ),
                        onPressed: () => Navigator.pop(context),
                      )
                    ],
                  ),
                );
              },
            ),
            TextButton(
              style: TextButton.styleFrom(
                padding: EdgeInsets.zero,
                tapTargetSize: MaterialTapTargetSize.shrinkWrap,
                minimumSize: const Size(0.0, 0.0),
              ),
              child: Container(
                width: _screenSize.width,
                alignment: Alignment.center,
                child: Stack(
                  children: <Widget>[
                    Image.asset(
                      'assets/industrial.jpg',
                      width: _screenSize.width,
                      fit: BoxFit.cover,
                    ),
                    Positioned(
                      bottom: 44.0,
                      left: 22.0,
                      child: Text(
                        'División Industrial',
                        style: GoogleFonts.robotoSlab(
                          fontSize: 16.0,
                          color: Colors.white,
                          shadows: <Shadow>[
                            const Shadow(
                              offset: Offset(1.0, 1.0),
                              blurRadius: 3.0,
                              color: Colors.black87,
                            ),
                          ],
                        ),
                      ),
                    )
                  ],
                ),
              ),
              onPressed: () {
                List<Widget> indChil = [];

                industrial.forEach((element) {
                  indChil.add(TextButton(
                    child: Text(
                      element,
                      textAlign: TextAlign.center,
                      style: GoogleFonts.roboto(
                        fontSize: 16.0,
                        color: Colors.black,
                      ),
                    ),
                    onPressed: () => Navigator.push(context, MaterialPageRoute(
                      builder: (context) => Industrial(
                        modelo: element,
                        modelos: industrial,
                      ),
                    )),
                  ));
                });

                showDialog(
                  context: context,
                  barrierDismissible: true,
                  builder: (context) => AlertDialog(
                    title: Text(
                      'Selecciona un producto',
                      textAlign: TextAlign.center,
                      style: GoogleFonts.roboto(
                        fontSize: 20.0,
                        fontWeight: FontWeight.bold,
                        color: const Color.fromRGBO(180, 4, 4, 2),
                      ),
                    ),
                    content: SingleChildScrollView(
                      child: Column(
                        children: indChil,
                      ),
                    ),
                    actions: <Widget>[
                      TextButton(
                        child: Text(
                          'Cancelar',
                          style: GoogleFonts.roboto(),
                        ),
                        onPressed: () => Navigator.pop(context),
                      )
                    ],
                  ),
                );
              },
            ),
            TextButton(
              style: TextButton.styleFrom(
                padding: EdgeInsets.zero,
                tapTargetSize: MaterialTapTargetSize.shrinkWrap,
                minimumSize: const Size(0.0, 0.0),
              ),
              child: Container(
                width: _screenSize.width,
                alignment: Alignment.center,
                child: Stack(
                  children: <Widget>[
                    Image.asset(
                      'assets/oem.jpg',
                      width: _screenSize.width,
                      fit: BoxFit.cover,
                    ),
                    Positioned(
                      bottom: 44.0,
                      left: 22.0,
                      child: Text(
                        'División OEM',
                        style: GoogleFonts.robotoSlab(
                          fontSize: 16.0,
                          color: Colors.white,
                          shadows: <Shadow>[
                            const Shadow(
                              offset: Offset(1.0, 1.0),
                              blurRadius: 3.0,
                              color: Colors.black87,
                            )
                          ],
                        ),
                      ),
                    )
                  ],
                ),
              ),
              onPressed: () {
                List<Widget> oemChil = [];

                oem.forEach((element) {
                  oemChil.add(TextButton(
                    child: Text(
                      element,
                      textAlign: TextAlign.center,
                      style: GoogleFonts.roboto(
                        fontSize: 16.0,
                        color: Colors.black,
                      ),
                    ),
                    onPressed: () => Navigator.push(context, MaterialPageRoute(
                      builder: (context) => OEM(
                        modelo: element,
                        modelos: oem,
                      ),
                    )),
                  ));
                });

                showDialog(
                  context: context,
                  barrierDismissible: true,
                  builder: (context) => AlertDialog(
                    title: Text(
                      'Selecciona un producto',
                      textAlign: TextAlign.center,
                      style: GoogleFonts.roboto(
                        fontSize: 20.0,
                        fontWeight: FontWeight.bold,
                        color: const Color.fromRGBO(180, 4, 4, 2),
                      ),
                    ),
                    content: SingleChildScrollView(
                      child: Column(
                        children: oemChil,
                      ),
                    ),
                    actions: <Widget>[
                      TextButton(
                        child: Text(
                          'Cancelar',
                          style: GoogleFonts.roboto(),
                        ),
                        onPressed: () => Navigator.pop(context),
                      )
                    ],
                  ),
                );
              },
            ),
            TextButton(
              style: TextButton.styleFrom(
                padding: EdgeInsets.zero,
                tapTargetSize: MaterialTapTargetSize.shrinkWrap,
                minimumSize: const Size(0.0, 0.0),
              ),
              child: Container(
                width: _screenSize.width,
                alignment: Alignment.center,
                child: Stack(
                  children: <Widget>[
                    Image.asset(
                      'assets/apl.jpg',
                      width: _screenSize.width,
                      fit: BoxFit.cover,
                    ),
                    Positioned(
                      bottom: 44.0,
                      left: 22.0,
                      child: Text(
                        'División APL',
                        style: GoogleFonts.robotoSlab(
                          fontSize: 16.0,
                          color: Colors.white,
                          shadows: <Shadow>[
                            const Shadow(
                              offset: Offset(1.0, 1.0),
                              blurRadius: 3.0,
                              color: Colors.black87,
                            )
                          ],
                        ),
                      ),
                    )
                  ],
                ),
              ),
              onPressed: () => Navigator.pushNamed(context, 'apl'),
            ),
            TextButton(
              style: TextButton.styleFrom(
                padding: EdgeInsets.zero,
                tapTargetSize: MaterialTapTargetSize.shrinkWrap,
                minimumSize: const Size(0.0, 0.0),
              ),
              child: Container(
                width: _screenSize.width,
                alignment: Alignment.center,
                child: Stack(
                  children: <Widget>[
                    Image.asset(
                      'assets/unidades.jpg',
                      width: _screenSize.width,
                      fit: BoxFit.cover,
                    ),
                    Positioned(
                      bottom: 44.0,
                      left: 22.0,
                      child: SizedBox(
                        width: _screenSize.width-44.0,
                        child: Text(
                          'Unidades de Ventilación Para Recuperación de Energía',
                          style: GoogleFonts.robotoSlab(
                            fontSize: 16.0,
                            color: Colors.white,
                            shadows: <Shadow>[
                              const Shadow(
                                offset: Offset(1.0, 1.0),
                                blurRadius: 3.0,
                                color: Colors.black87,
                              )
                            ],
                          ),
                        ),
                      ),
                    )
                  ],
                ),
              ),
              onPressed: () => Navigator.pushNamed(context, 'ener'),
            )
          ],
        ),
      ),
    );
  }
}
