import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:memorias_calculo/src/back/scoped_models/user_info_model.dart';
import 'package:scoped_model/scoped_model.dart';

class IndexPage extends StatefulWidget {
  final bool errorConexion;

  const IndexPage({Key? key, required this.errorConexion}) : super(key: key);

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

class _IndexPageState extends State<IndexPage> {
  late List<String> _memoriasTitles;
  late List<String> _memoriasImg;
  late List<String> _memoriasRutas;

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

    _memoriasTitles = [
      if(!widget.errorConexion) "MEMORIA DE CÁLCULO VENTILACIÓN LOCALIZADA",
      "MEMORIA DE CÁLCULO VENTILACIÓN ESTACIONAMIENTOS",
      "MEMORIA DE CÁLCULO VENTILACIÓN AMBIENTAL"
    ];

    _memoriasImg = [
      if(!widget.errorConexion) "campana.png",
      "estacionamientos.png",
      "1.png"
    ];

    _memoriasRutas = [
      if(!widget.errorConexion) "ventilacionLocalizada",
      "ventilacionEstacionamientos",
      "ventilacionAmbiental"
    ];
  }

  @override
  Widget build(BuildContext context) {
    return ScopedModelDescendant<UserInfoModel>(
      builder: (context, child, model){
        return Scaffold(
          body: LayoutBuilder(
            builder: (context , constraints){
              final parentHeight = constraints.maxHeight;
              final parentWidth = constraints.maxWidth;

              double containerHeight = parentHeight;
              double containerWidth = parentWidth > 1440
                  ? parentWidth*0.5 : parentWidth > 1280 && parentWidth <= 1440
                  ? parentWidth*0.6 : parentWidth > 1080 && parentWidth <= 1280
                  ? parentWidth*0.75 : parentWidth > 900 && parentWidth <= 1080
                  ? parentWidth*0.8 : parentWidth > 720 && parentWidth <= 900
                  ? parentWidth*0.85 : parentWidth > 540 && parentWidth <= 720
                  ? parentWidth*0.9 : parentWidth;
              double containerMargin = (parentWidth - containerWidth) / 2;

              return Container(
                height: containerHeight,
                width: containerWidth,
                margin: EdgeInsets.symmetric(
                    horizontal: containerMargin,
                ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Container(
                      margin: const EdgeInsets.symmetric(
                        horizontal: 32.0,
                      ),
                      child: Row(
                        children: [
                          Container(
                            padding: const EdgeInsets.fromLTRB(0.0, 8.0, 8.0, 0.0),
                            child: Text(
                              "Portal de memorias de cálculo",
                              style: GoogleFonts.roboto(
                                fontSize: 16.0,
                                color: Colors.black54,
                                fontWeight: FontWeight.bold,
                                fontStyle: FontStyle.italic,
                              ),
                            ),
                          )
                        ],
                      ),
                    ),
                    const SizedBox(
                      height: 8.0,
                    ),
                    Row(
                      children: [
                        const SizedBox(width: 32.0),
                        Image.asset(
                          "logo.png",
                          width: 64.0,
                        ),
                        Expanded(
                          child: Container(
                            padding: const EdgeInsets.fromLTRB(208.0, 0.0, 16.0, 0.0),
                            child: Text(
                              "S&P MX  ${"MX".replaceAllMapped(RegExp(r'[A-Z]'), (match) => String.fromCharCode(match.group(0)!.codeUnitAt(0) + 127397))}",
                              textAlign: TextAlign.center,
                              style: const TextStyle(
                                fontFamily: "Helvetica Neue Black Cond",
                                fontSize: 20.0,
                              ),
                            ),
                          )
                        ),
                        Image.asset(
                          "logo_completo.png",
                          width: 256.0,
                        ),
                        const SizedBox(width: 32.0),
                      ],
                    ),
                    const SizedBox(
                      height: 32.0,
                    ),
                    Image.asset(
                      "matriz.png",
                      width: 120.0,
                      fit: BoxFit.cover,
                    ),
                    const SizedBox(
                      height: 48.0,
                    ),
                    Container(
                      width: double.infinity,
                      padding: const EdgeInsets.symmetric(
                          horizontal: 32.0
                      ),
                      child: const Text(
                        "PORTAL DE MEMORIAS DE CÁLCULO",
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          fontFamily: "Helvetica Neue Black Cond",
                          fontSize: 28.0,
                        ),
                      ),
                    ),
                    const SizedBox(
                      height: 8.0,
                    ),
                    Container(
                      padding: const EdgeInsets.symmetric(horizontal: 32.0),
                      width: double.infinity,
                      child: Text(
                        "Bienvenido ${model.nombreCompleto}, selecciona la memoria de cálculo a la que deseas acceder:",
                        textAlign: TextAlign.center,
                        style: const TextStyle(
                          fontFamily: "Helvetica Neue Light",
                          fontSize: 22.0,
                          fontWeight: FontWeight.w600,
                          color: Color.fromRGBO(104, 104, 104, 1),
                        ),
                      ),
                    ),
                    const SizedBox(
                      height: 32.0,
                    ),
                    Expanded(
                      child: GridView.builder(
                        itemCount: _memoriasTitles.length,
                        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                            crossAxisCount: containerWidth > 720 ? 3 : 2
                        ),
                        itemBuilder: (context, index){
                          return Card(
                            elevation: 16,
                            shape: const BeveledRectangleBorder(
                              borderRadius: BorderRadius.zero,
                            ),
                            margin: const EdgeInsets.fromLTRB(16.0, 8.0, 16.0, 8.0),
                            child: TextButton(
                              style: TextButton.styleFrom(
                                minimumSize: const Size(0.0, 0.0),
                                padding: EdgeInsets.zero,
                                tapTargetSize: MaterialTapTargetSize.shrinkWrap,
                              ),
                              child: GridTile(
                                child: Container(
                                  margin: const EdgeInsets.only(
                                    top: 16.0,
                                    bottom: 80.0,
                                  ),
                                  child: Image.asset(
                                    _memoriasImg[index],
                                  ),
                                ),
                                footer: Container(
                                  width: double.infinity,
                                  decoration: const BoxDecoration(
                                    border: Border(
                                      bottom: BorderSide(
                                        width: 8.0,
                                        color: Color(0xFFFF0000),
                                      ),
                                    ),
                                  ),
                                  child: Text(
                                    _memoriasTitles[index],
                                    textAlign: TextAlign.center,
                                    style: GoogleFonts.roboto(
                                      fontSize: containerWidth > 720 ? 16.0 : 14.0,
                                      color: Colors.black,
                                    ),
                                    maxLines: 3,
                                    overflow: TextOverflow.ellipsis,
                                  ),
                                  padding: const EdgeInsets.fromLTRB(16, 32, 16, 16),
                                ),
                              ),
                              onPressed: (){
                                Map<String, String> info = {
                                  "IDUSUARIO" : model.idUsuario,
                                  "TOKEN" : model.accessToken
                                };

                                String infoStr = jsonEncode(info);
                                Navigator.pushNamed(context, _memoriasRutas[index], arguments: infoStr);
                              },
                            ),
                          );
                        },
                      ),
                    ),
                  ],
                ),
              );
            },
          ),
        );
      },
    );
  }
}
