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

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

  @override
  State<APL> createState() => _APLState();
}

class _APLState extends State<APL> {
  double minFontSize = 10.0;
  double fontSize = 10.0;
  double maxFontSize = 28.0;
  final tablaAPL = <Map<String, String>>[
    {
      "nombre" : "Línea Xinzhuang",
      "pais"   : "Taiwán",
      "equipo" : "KTF",
      "uso"    : "Ferroviario",
      "kw"     : "18 - 150 Kw",
      "anio"   : "2009"
    },
    {
      "nombre" : "Línea Xinyl",
      "pais"   : "Taiwán",
      "equipo" : "KTF",
      "uso"    : "Ferroviario",
      "kw"     : "37 - 132 Kw",
      "anio"   : "2009"
    },
    {
      "nombre" : "Túnel Submarino Xiangan",
      "pais"   : "China",
      "equipo" : "KJF-KTF",
      "uso"    : "Túnel Carretero",
      "kw"     : "15 - 450 Kw",
      "anio"   : "2010"
    },
    {
      "nombre" : "Caverna Isla Jurong",
      "pais"   : "Singapur",
      "equipo" : "KTF",
      "uso"    : "Almacenaje",
      "kw"     : "160 - 315 Kw",
      "anio"   : "2010"
    },
    {
      "nombre" : "Túnel Xishan Taigu",
      "pais"   : "China",
      "equipo" : "KJF-KTF",
      "uso"    : "Túnel Carretero",
      "kw"     : "335 - 670 Kw",
      "anio"   : "2011"
    },
    {
      "nombre" : "Túnel Bagua Shan",
      "pais"   : "Taiwán",
      "equipo" : "KTF",
      "uso"    : "Túnel Carretero",
      "kw"     : "315 Kw",
      "anio"   : "2012"
    },
    {
      "nombre" : "Línea 12 SCT",
      "pais"   : "México",
      "equipo" : "KTF",
      "uso"    : "Ferroviario",
      "kw"     : "75 - 125 Kw",
      "anio"   : "2012"
    },
    {
      "nombre" : "Metro Kuala Lumpur",
      "pais"   : "Malasia",
      "equipo" : "KTF",
      "uso"    : "Ferroviario",
      "kw"     : "250 Kw",
      "anio"   : "2012"
    },
    {
      "nombre" : "Línea 3 Metrorrey",
      "pais"   : "México",
      "equipo" : "KTF",
      "uso"    : "Ferroviario",
      "kw"     : "75 Kw",
      "anio"   : "2013"
    },
    {
      "nombre" : "Lumbrera Patriotismo Línea 9 SCT",
      "pais"   : "México",
      "equipo" : "KTF",
      "uso"    : "Ferroviario",
      "kw"     : "75 Kw",
      "anio"   : "2013"
    },
    {
      "nombre" : "Aeropuerto Taoyuan",
      "pais"   : "Taiwán",
      "equipo" : "KJF",
      "uso"    : "Aeroportuario",
      "kw"     : "37 - 132 Kw",
      "anio"   : "2013"
    },
    {
      "nombre" : "Túnel Xin Baoxian",
      "pais"   : "China",
      "equipo" : "KTF",
      "uso"    : "Túnel Carretero",
      "kw"     : "350 - 500 Kw",
      "anio"   : "2013"
    },
    {
      "nombre" : "Línea 3 Metro de Santiago",
      "pais"   : "Chile",
      "equipo" : "KJF-KTF",
      "uso"    : "Ferroviario",
      "kw"     : "75 - 250 Kw",
      "anio"   : "2014"
    },
    {
      "nombre" : "Línea 6 Metro de Santiago",
      "pais"   : "Chile",
      "equipo" : "KTF",
      "uso"    : "Ferroviario",
      "kw"     : "75 - 250 Kw",
      "anio"   : "2014"
    },
    {
      "nombre" : "Línea Downtown 2",
      "pais"   : "Singapur",
      "equipo" : "KJF-KTF",
      "uso"    : "Ferroviario",
      "kw"     : "132 - 160 Kw",
      "anio"   : "2015"
    },
    {
      "nombre" : "Lumbrera Tacuba Línea 7 SCT",
      "pais"   : "México",
      "equipo" : "KTF",
      "uso"    : "Ferroviario",
      "kw"     : "75 Kw",
      "anio"   : "2015"
    },
    {
      "nombre" : "AcaTúnel",
      "pais"   : "México",
      "equipo" : "KJF",
      "uso"    : "Túnel Carretero",
      "kw"     : "45 - 75 Kw",
      "anio"   : "2015"
    },
    {
      "nombre" : "Lumbrera San Joaquín Línea 7 SCT",
      "pais"   : "México",
      "equipo" : "KTF",
      "uso"    : "Ferroviario",
      "kw"     : "75 Kw",
      "anio"   : "2016"
    },
    {
      "nombre" : "Lumbrera Polanco Línea 7 SCT",
      "pais"   : "México",
      "equipo" : "KTF",
      "uso"    : "Ferroviario",
      "kw"     : "175 Kw",
      "anio"   : "2016"
    },
    {
      "nombre" : "Lumbrera Constituyentes L 7 SCT",
      "pais"   : "México",
      "equipo" : "KTF",
      "uso"    : "Ferroviario",
      "kw"     : "75 Kw",
      "anio"   : "2016"
    },
    {
      "nombre" : "Túnel Interlomas- Huixquilucan",
      "pais"   : "México",
      "equipo" : "KJF",
      "uso"    : "Túnel Carretero",
      "kw"     : "75 Kw",
      "anio"   : "2016"
    },
    {
      "nombre" : "Túnel Submarino Coatzacoalcos",
      "pais"   : "México",
      "equipo" : "KJF",
      "uso"    : "Túnel Carretero",
      "kw"     : "110 Kw",
      "anio"   : "2016"
    },
    {
      "nombre" : "Metro Delhi",
      "pais"   : "India",
      "equipo" : "MXA",
      "uso"    : "Ferroviario",
      "kw"     : "30 - 55 Kw",
      "anio"   : "2016"
    },
    {
      "nombre" : "Túnel Submarino Hong Kong-Zhuhai-Macau",
      "pais"   : "China",
      "equipo" : "KTF",
      "uso"    : "Túnel Carretero",
      "kw"     : "450 Kw",
      "anio"   : "2017"
    },
    {
      "nombre" : "Túnel Vía Exprés Mei Yu",
      "pais"   : "China",
      "equipo" : "KTF",
      "uso"    : "Túnel Carretero",
      "kw"     : "250 - 670 Kw",
      "anio"   : "2017"
    },
    {
      "nombre" : "Morelia Sur I",
      "pais"   : "México",
      "equipo" : "KJF",
      "uso"    : "Túnel Carretero",
      "kw"     : "55 Kw",
      "anio"   : "2017"
    },
    {
      "nombre" : "Morelia Sur II",
      "pais"   : "México",
      "equipo" : "KJF",
      "uso"    : "Túnel Carretero",
      "kw"     : "90 Kw",
      "anio"   : "2017"
    },
    {
      "nombre" : "Línea 3 Metro Guadalajara",
      "pais"   : "México",
      "equipo" : "KJF-KTF",
      "uso"    : "Ferroviario",
      "kw"     : "45 - 180 Kw",
      "anio"   : "2017"
    },
    {
      "nombre" : "Tren México Toluca",
      "pais"   : "México",
      "equipo" : "KTF",
      "uso"    : "Ferroviario",
      "kw"     : "25 Kw",
      "anio"   : "2017"
    },
  ];
  final List<TableRow> _children = [];

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

    _children.add(TableRow(
        decoration: const BoxDecoration(
            color: Color(0xFFFB0505)
        ),
        children: [
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 16.0),
            child: Text(
              'Nombre',
              textAlign: TextAlign.center,
              style: GoogleFonts.roboto(
                  color: Colors.white,
                  fontSize: 18.0
              ),
            ),
          ),
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 16.0),
            child: Text(
              'País',
              textAlign: TextAlign.center,
              style: GoogleFonts.roboto(
                  color: Colors.white,
                  fontSize: 18.0
              ),
            ),
          ),
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 16.0),
            child: Text(
              'Equipo',
              textAlign: TextAlign.center,
              style: GoogleFonts.roboto(
                  color: Colors.white,
                  fontSize: 18.0
              ),
            ),
          ),
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 16.0),
            child: Text(
              'Uso',
              textAlign: TextAlign.center,
              style: GoogleFonts.roboto(
                  color: Colors.white,
                  fontSize: 18.0
              ),
            ),
          ),
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 16.0),
            child: Text(
              'Kw',
              textAlign: TextAlign.center,
              style: GoogleFonts.roboto(
                  color: Colors.white,
                  fontSize: 18.0
              ),
            ),
          ),
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 16.0),
            child: Text(
              'Año',
              textAlign: TextAlign.center,
              style: GoogleFonts.roboto(
                  color: Colors.white,
                  fontSize: 18.0
              ),
            ),
          )
        ]
    ));

    for(int i = 0; i < tablaAPL.length; i++){
      _children.add(TableRow(
          decoration: BoxDecoration(
              color: i % 2 == 0 ? const Color(0x00000000) :  const Color(0xFFECEAEA)
          ),
          children: [
            Container(
              padding: const EdgeInsets.symmetric(horizontal: 4.0, vertical: 8.0),
              child: Text(
                tablaAPL[i]['nombre']!,
                style: GoogleFonts.roboto(
                    color: const Color.fromRGBO(102, 102, 102, 1),
                    fontSize: 16.0
                ),
              ),
            ),
            Container(
              padding: const EdgeInsets.symmetric(horizontal: 4.0, vertical: 8.0),
              child: Text(
                tablaAPL[i]['pais']!,
                style: GoogleFonts.roboto(
                    color: const Color.fromRGBO(102, 102, 102, 1),
                    fontSize: 16.0
                ),
              ),
            ),
            Container(
              padding: const EdgeInsets.symmetric(horizontal: 4.0, vertical: 8.0),
              child: Text(
                tablaAPL[i]['equipo']!,
                style: GoogleFonts.roboto(
                    color: const Color.fromRGBO(102, 102, 102, 1),
                    fontSize: 16.0
                ),
              ),
            ),
            Container(
              padding: const EdgeInsets.symmetric(horizontal: 4.0, vertical: 8.0),
              child: Text(
                tablaAPL[i]['uso']!,
                style: GoogleFonts.roboto(
                    color: const Color.fromRGBO(102, 102, 102, 1),
                    fontSize: 16.0
                ),
              ),
            ),
            Container(
              padding: const EdgeInsets.symmetric(horizontal: 4.0, vertical: 8.0),
              child: Text(
                tablaAPL[i]['kw']!,
                style: GoogleFonts.roboto(
                    color: const Color.fromRGBO(102, 102, 102, 1),
                    fontSize: 16.0
                ),
              ),
            ),
            Container(
              padding: const EdgeInsets.symmetric(horizontal: 4.0, vertical: 8.0),
              child: Text(
                tablaAPL[i]['anio']!,
                style: GoogleFonts.roboto(
                    color: const Color.fromRGBO(102, 102, 102, 1),
                    fontSize: 16.0
                ),
              ),
            )
          ]
      ));
    }
  }

  @override
  Widget build(BuildContext context) {
    final _screenSize = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(),
      body: SizedBox(
        width: _screenSize.width,
        height: _screenSize.height,
        child: Stack(
          children: <Widget>[
            SingleChildScrollView(
              child: Column(
                children: <Widget>[
                  Container(
                    width: _screenSize.width,
                    alignment: Alignment.center,
                    child: Stack(
                      children: <Widget>[
                        Image(
                          width: _screenSize.width,
                          image: const AssetImage('assets/APL_header.jpg'),
                          fit: BoxFit.cover,
                        ),
                        Positioned(
                          top: 24.0,
                          left: 28.0,
                          child: Text(
                            'Producto',
                            style: GoogleFonts.roboto(
                                fontSize: 10.0,
                                color: Colors.white,
                                fontWeight: FontWeight.w300,
                                shadows: <Shadow>[
                                  const Shadow(
                                      offset: Offset(1.0, 1.0),
                                      blurRadius: 3.0,
                                      color: Colors.black87
                                  )
                                ]
                            ),
                          ),
                        ),
                        Positioned(
                          top: 32.0,
                          left: 28.0,
                          child: Text(
                            'División APL',
                            style: GoogleFonts.robotoSlab(
                                fontSize: 22.0,
                                color: Colors.white,
                                shadows: <Shadow>[
                                  const Shadow(
                                      offset: Offset(1.0, 1.0),
                                      blurRadius: 3.0,
                                      color: Colors.black87
                                  )
                                ]
                            ),
                          ),
                        )
                      ],
                    ),
                  ),
                  Html(
                    data: """
                    <div>
                      <p>En <b>Soler & Palau Ventilation Group</b> estamos comprometidos con proveer al mercado con las soluciones de ventilación 
                      que en cada uno de los proyectos nos demande, por lo que hace ya más de cinco años creamos la División APL, departamento 
                      encargado y especializado en la ventilación de túneles carreteros y ferroviarios.</p>
                      <p>La División APL cuenta con un equipo de profesionales especializado en arquitectura, mecánica de fluidos, RAMS, control y 
                      automatización, instalación eléctrica, control documental y simulación CFD.</p>
                      <p>En esta División desarrollamos la ingeniería básica, ingeniería de detalle, análisis RAMS, simulación CFD unidimensional y 
                      tridimensional, pruebas FAT y pruebas SAT. Dentro del proceso productivo del proyecto, se realizan las siguientes etapas:</p>
                      <div>
                        <ul>
                          <li>Estudio de Planos Arquitectónicos, basándonos en las necesidades del cliente y los espacios disponibles siempre, 
                          apegados a una correcta selección del sistema, los requerimientos y la normatividad vigente.</li>
                          <li>Análisis detallado de la información proporcionada para la elaboración de memorias de cálculo y especificación de los 
                          diversos componentes.</li>
                          <li>Comprobación del funcionamiento del sistema mediante Simulación CFD (ANSYS), tanto en escenarios de operación normal 
                          como en emergencia, tomando en cuenta desde situaciones cotidianas hasta las variables más críticas de funcionamiento, 
                          buscando siempre cumplir los más altos estándares de calidad para garantizar la seguridad de los usuarios (NFPA).</li>
                          <li>Análisis RAMS, que por sus siglas en ingles significa (R) Fiabilidad, (A) Disponibilidad, (M) Mantenibilidad y (S) 
                          Seguridad, nos permite planificar y minimizar errores futuros, garantizando un sistema de buena calidad, fiable y seguro 
                          para el usuario. Mediante este método se obtiene un Safety Report, dentro del marco de las normas en 50126, 50128 y 
                          50129.</li>
                          <li>Preparación de manuales de instalación, operación y mantenimiento con imágenes en 3D y medidas reales que permiten 
                          una visualización detallada de los trabajos a realizar tomando en cuenta las posibles dificultades que pudieran presentarse 
                          durante la realización de dichas actividades y así poder anticipar soluciones particulares de cada sistema.</li>
                          <li>Elaboración de cuadernos de pruebas tanto en fábrica (FAT) como en el sitio (SAT), a fin de garantizar al proyecto la 
                          satisfacción y cumplimiento de sus necesidades.</li>
                          <li>Capacitación del personal que posteriormente será el responsable de la manipulación del sistema para garantizar un 
                          uso adecuado y eficiente del mismo.</li>
                          <li>Automatización del funcionamiento del sistema ya integrado.</li>
                          <li>Puesta en marcha de acuerdo con los protocolos establecidos o solicitados.</li>
                          <li>Integración del sistema eléctrico y de control para garantizar el funcionamiento adecuado dentro de los parámetros 
                          establecidos en la normatividad de referencia (NFPA 130, EN 50126, EN 50128, EN 50129, NFPA 70E, NEC, IEC.</li>
                        </ul>
                      </div>
                    </div>
                    <br>
                    <br>
                    <div>
                      <h2>Tecnología Propia</h2>
                      <div>
                        <p>La marca S&P ha alcanzando reconocimiento mundial gracias a su equipo humano, a la calidad, fiabilidad y a una férrea 
                        apuesta por la innovación. Soler & Palau Ventilation Group ha basado su proyecto en una serie de preceptos que han pautado el 
                        pasado, presente y futuro de la empresa.</p>
                      </div>
                    </div>
                    <div>
                      <p>Si el proyecto de S&P debía ser fuerte y consolidarse en el tiempo, era necesario basarse en la creatividad y aportar 
                      productos diferenciales, evitando imitar lo que hacían los demás. S&P ha registrado, a lo largo de su historia, 80 patentes 
                      propias, más de 20 modelos industriales y más de 120 modelos de utilidad.</p>
                      <p>Los ventiladores S&P se desarrollan mediante una ingeniería de precisión con el objetivo de tener un desempeño superior y 
                      una operación libre de fallas durante años después de su adquisición.</p>
                      <p>Por otro lado, el avance de la tecnología ha permitido que nuestros ventiladores, siempre fabricados y ensamblados en nuestras 
                      fábricas con tecnología de punta y certificada en ISO 9001, logren un desempeño de clase mundial en aplicaciones de 
                      ventilación.</p>
                      <p>Cada uno de los ventiladores S&P son probados asegurando entonces su desempeño y calidad. Gracias a nuestras instalaciones 
                      certificadas por la Asociación Internacional del Movimiento y Control de Aire (AMCA, por sus siglas en inglés), aseguramos que 
                      nuestros ventiladores cumplen con las especificaciones más exigentes.</p>
                      <p></p>
                    </div>
                    <br>
                    <br>
                    <div>
                      <h2>Internacionalización y crecimiento</h2>
                      <div>
                        <p>La marca S&P ha alcanzando reconocimiento mundial gracias a su equipo humano, a la calidad, fiabilidad y a una férrea apuesta 
                        por la innovación. Soler & Palau Ventilation Group ha basado su proyecto en una serie de preceptos que han pautado el pasado, 
                        presente y futuro de la empresa.</p>
                      </div>
                    </div>
                    <div>
                      <p>S&P tuvo claro que la garantía de futuro de la empresa pasaba por abrirse al mundo y entrar en nuevos mercados con elevados 
                      niveles de competitividad. Ello obligaba a una constante mejora del producto.</p>
                      <p>Actualmente S&P es líder mundial en ventilación, con centros productivos en Europa, América y Asia. Una potente estructura de 
                      distribución, mediante filiales y distribuidores exclusivos, permite que S&P esté presente en todos los mercados mundiales, 
                      dando cobertura y servicio.</p>
                      <div>
                        <p class='aligncenter'>
                          <img src="https://www.solerpalau.mx/media/home/categories_home/producto/apl-1.png">
                        </p>
                      </div>
                    </div>
                    """,
                    style: {
                      "b": Style(
                          color: Color.fromRGBO(227, 6, 10, 1)
                      ),
                      "p": Style(
                          fontSize: FontSize(fontSize < minFontSize ? minFontSize : fontSize > maxFontSize ? maxFontSize : fontSize),
                          fontFamily: 'Roboto'
                      ),
                      "ul": Style(
                          color: Color.fromRGBO(138, 138, 138, 1),
                          fontFamily: 'Roboto',
                          fontSize: FontSize(fontSize < minFontSize ? minFontSize : fontSize > maxFontSize ? maxFontSize : fontSize)
                      ),
                      "h2" : Style(
                          fontFamily: 'Roboto Slab',
                          fontSize: FontSize(fontSize < minFontSize ? minFontSize+2 : fontSize > maxFontSize ? maxFontSize+2 : fontSize+2)
                      ),
                      ".aligncenter" : Style(
                          textAlign: TextAlign.center
                      )
                    },
                  ),
                  Container(
                    margin: const EdgeInsets.fromLTRB(8.0, 0.0, 8.0, 16.0),
                    width: double.infinity,
                    child: Text(
                      'Proyectos Emblemáticos',
                      style: GoogleFonts.robotoSlab(
                          fontSize: 24.0
                      ),
                    ),
                  ),
                  SingleChildScrollView(
                    scrollDirection: Axis.horizontal,
                    child: SizedBox(
                      width: 768.0,
                      child: Table(
                        children: _children,
                        defaultVerticalAlignment: TableCellVerticalAlignment.middle,
                      ),
                    ),
                  ),
                  const SizedBox(height: 64.0)
                ],
              ),
            ),
            Positioned(
              bottom: 0,
              right: 0,
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    FloatingActionButton(
                      child: const Icon(
                          Icons.zoom_in
                      ),
                      onPressed: fontSize < maxFontSize ? (){
                        setState(() {
                          if(fontSize <= maxFontSize){
                            fontSize += 1.0;
                          }
                        });
                      } : null,
                      heroTag: "zoom_in",
                      backgroundColor: fontSize < maxFontSize ? const Color.fromRGBO(180, 4, 4, 1) : Colors.grey,
                      foregroundColor: Colors.white,
                    ),
                    const SizedBox(width: 8.0),
                    FloatingActionButton(
                      child: const Icon(
                          Icons.zoom_out
                      ),
                      onPressed: fontSize > minFontSize ? (){
                        setState(() {
                          if(fontSize >= minFontSize){
                            fontSize -= 1.0;
                          }
                        });
                      } : null,
                      heroTag: "zoom_out",
                      backgroundColor: fontSize > minFontSize ? const Color.fromRGBO(180, 4, 4, 1) : Colors.grey,
                      foregroundColor: Colors.white,
                    )
                  ],
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}
