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

import '../../src/pages/pdf_viewer.dart';

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

  @override
  State<RecuperacionEnergia> createState() => _RecuperacionEnergiaState();
}

class _RecuperacionEnergiaState extends State<RecuperacionEnergia> {
  double minFontSize = 10.0;
  double fontSize = 10.0;
  double maxFontSize = 28.0;
  String brochure = 'https://www.renewaire.com/wp-content/uploads/2017/09/MAR_LIT_074_RGB_ERV_Guide.pdf';

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

  void showViewer(String document) {
    Navigator.of(context).push(MaterialPageRoute(
        builder: (context) => PDFViewer(
          localFile: false,
          url: document,
        )
    ));
  }

  @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/medio-ambiente.jpg'),
                          fit: BoxFit.cover,
                        ),
                        Positioned(
                          top: 16.0,
                          left: 28.0,
                          child: Text(
                            'Unidades De Ventilación Para Recuperación de Energía',
                            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: 24.0,
                          left: 28.0,
                          child: Container(
                            width: _screenSize.width-56.0,
                            child: Text(
                              'Unidades De Ventilación Para Recuperación de Energía',
                              style: GoogleFonts.robotoSlab(
                                  fontSize: 20.0,
                                  color: Colors.white,
                                  shadows: <Shadow>[
                                    const Shadow(
                                        offset: Offset(1.0, 1.0),
                                        blurRadius: 3.0,
                                        color: Colors.black87
                                    )
                                  ]
                              ),
                            ),
                          ),
                        )
                      ],
                    ),
                  ),
                  const SizedBox(height: 16.0),
                  const Divider(),
                  Html(
                    data: """
                    <div>
                      <h2>MEJORA LA CALIDAD DEL AIRE INTERIOR</h2>
                      <p>Al proporcionar simultaneamente el escape y suministro de aire fresco, RenewAire reduce la concentración de contaminantes 
                      nocivos en el aire interior- una necesidad absoluta en las escuelas, oficinas y ambientes de fumadores.</p>
                      <h2>RESPETA LOS CÓDIGOS DE VENTILACIÓN PARA EL INTERCAMBIO DE AIRE</h2>
                      <p>Al proporcionar simultaneamente el escape y suministro de aire fresco, RenewAire reduce la concentración de contaminantes 
                      nocivos en el aire interior- una necesidad absoluta en las escuelas, oficinas y ambientes de fumadores.</p>
                      <h2>CONTROLA EL EXCESO DE HUMEDAD</h2>
                      <p>Al proporcionar simultaneamente el escape y suministro de aire fresco, RenewAire reduce la concentración de contaminantes 
                      nocivos en el aire interior- una necesidad absoluta en las escuelas, oficinas y ambientes de fumadores.</p>
                      <h2>RENDIMIENTO ÓPTIMO DE EL CLIMA FRÍO</h2>
                      <p>Al proporcionar simultaneamente el escape y suministro de aire fresco, RenewAire reduce la concentración de contaminantes 
                      nocivos en el aire interior- una necesidad absoluta en las escuelas, oficinas y ambientes de fumadores.</p>
                      <h2>RENDIMIENTO ÓPTIMO DE EL CLIMA CÁLIDO</h2>
                      <p>Al proporcionar simultaneamente el escape y suministro de aire fresco, RenewAire reduce la concentración de contaminantes 
                      nocivos en el aire interior- una necesidad absoluta en las escuelas, oficinas y ambientes de fumadores.</p>
                      <h2>AHORRO DE ENERGÍA = AHORRO DE DINERO</h2>
                      <p>Al proporcionar simultaneamente el escape y suministro de aire fresco, RenewAire reduce la concentración de contaminantes 
                      nocivos en el aire interior- una necesidad absoluta en las escuelas, oficinas y ambientes de fumadores.</p>
                    </div>
                    <br>
                    <br>
                    <img src="https://www.solerpalau.mx/media/img/energyefficient.jpg">
                    <br>
                    <br>
                    <br>
                    """,
                    style: {
                      "p": Style(
                          fontSize: FontSize(fontSize < minFontSize ? minFontSize : fontSize > maxFontSize ? maxFontSize : fontSize),
                          fontFamily: 'Roboto'
                      ),
                      "h2" : Style(
                          fontFamily: 'Roboto Slab',
                          fontSize: FontSize(fontSize < minFontSize ? minFontSize+2 : fontSize > maxFontSize ? maxFontSize+2 : fontSize+2),
                          color: const Color.fromRGBO(102, 102, 102, 1)
                      ),
                    },
                  ),
                  /*FloatingActionButton.extended(
                    label: Row(
                      children: <Widget>[
                        const Icon(
                          Icons.insert_drive_file,
                          color: Colors.white,
                        ),
                        Text(
                          'CATÁLOGO',
                          style: GoogleFonts.roboto(
                              fontWeight: FontWeight.w400,
                              color: Colors.white
                          ),
                        )
                      ],
                    ),
                    backgroundColor: const Color.fromRGBO(234, 44, 19, 1),
                    heroTag: "catalogo",
                    onPressed: () => true,
                  ),
                  const SizedBox(height: 16.0),*/
                  FloatingActionButton.extended(
                    label: Row(
                      children: <Widget>[
                        const Icon(
                          Icons.insert_drive_file,
                          color: Colors.white,
                        ),
                        Text(
                          'BROCHURE',
                          style: GoogleFonts.roboto(
                              fontWeight: FontWeight.w400,
                              color: Colors.white
                          ),
                        )
                      ],
                    ),
                    backgroundColor: const Color.fromRGBO(234, 44, 19, 1),
                    heroTag: "brochure",
                    onPressed: (){
                      showViewer(brochure);
                    },
                  ),
                  const SizedBox(height: 32.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,
                    )
                  ],
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}
