import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:quiosco_soler/productos/providers/submodelos_provider.dart';

import 'detalles_producto.dart';

class Comercial extends StatefulWidget {
  final String modelo;
  final List<String> modelos;

  Comercial({Key? key, required this.modelo, required this.modelos}) : super(key: key);

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

class _ComercialState extends State<Comercial> {
  late String _modelo;
  late List<String> _modelos;
  Widget _child = CircularProgressIndicator();
  final _submodelosProvider = SubmodelosProvider();

  Future<void> _changeChild(String modelo) async{
    final submodelos = await _submodelosProvider.fetchSubmodelos('Comercial', modelo);
    setState(() {
      _child = Expanded(
        child: GridView.count(
          crossAxisCount: 2,
          shrinkWrap: true,
          children: List.generate(submodelos.result.length, (index){
            return ButtonTheme(
              minWidth: 0.0,
              height: 0.0,
              padding: EdgeInsets.zero,
              materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
              child: TextButton(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    Expanded(
                      child: FadeInImage(
                        placeholder: AssetImage('assets/progressbar.gif'),
                        image: NetworkImage('https://www.solerpalau.mx/ALP/${submodelos.result[index].id}.jpg'),
                        fit: BoxFit.fitHeight,
                      ),
                    ),
                    Container(
                      child: Text(
                        submodelos.result[index].submodelo,
                        style: GoogleFonts.roboto(
                            fontWeight: FontWeight.bold,
                            color: Color.fromRGBO(102, 102, 102, 1),
                            fontSize: 16.0
                        ),
                        textAlign: TextAlign.center,
                      ),
                      padding: EdgeInsets.all(4.0),
                    )
                  ],
                ),
                onPressed: () => Navigator.push(context, MaterialPageRoute(
                    builder: (context) => DetallesProducto(
                      linea: 'Comercial',
                      modelo: _modelo,
                      submodelo: submodelos.result[index].submodelo,
                    )
                )),
              ),
            );
          }),
        ),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    final _screenSize = MediaQuery.of(context).size;
    if(_modelo == null){
      _modelo = widget.modelo;
      _modelos = widget.modelos;

      final index = _modelos.indexOf(_modelo);

      _modelos.removeAt(index);
      _modelos.insert(0, _modelo);
      _changeChild(_modelo);
    }
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        width: _screenSize.width,
        height: _screenSize.height,
        child: Column(
          children: <Widget>[
            Container(
              width: _screenSize.width,
              alignment: Alignment.center,
              child: Stack(
                children: <Widget>[
                  Image(
                    width: _screenSize.width,
                    image: AssetImage('assets/comercial_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>[
                            Shadow(
                                offset: Offset(1.0, 1.0),
                                blurRadius: 3.0,
                                color: Colors.black87
                            )
                          ]
                      ),
                    ),
                  ),
                  Positioned(
                    top: 32.0,
                    left: 28.0,
                    child: Text(
                      'Comercial',
                      style: GoogleFonts.robotoSlab(
                          fontSize: 22.0,
                          color: Colors.white,
                          shadows: <Shadow>[
                            Shadow(
                                offset: Offset(1.0, 1.0),
                                blurRadius: 3.0,
                                color: Colors.black87
                            )
                          ]
                      ),
                    ),
                  )
                ],
              ),
            ),
            Container(
              height: 48.0,
              margin: EdgeInsets.all(8.0),
              child: ListView.separated(
                scrollDirection: Axis.horizontal,
                itemCount: _modelos.length,
                itemBuilder: (context, index){
                  return TextButton(
                    child: Center(
                      child: Text(
                        _modelos[index],
                        style: GoogleFonts.roboto(
                            color: _modelo == _modelos[index] ? Color.fromRGBO(180, 4, 4, 1) : Colors.black
                        ),
                      ),
                    ),
                    onPressed: _modelo == _modelos[index] ? null : (){
                      setState(() {
                        _modelo = _modelos[index];
                        _child = CircularProgressIndicator();
                      });
                      _changeChild(_modelo);
                    },
                    style: TextButton.styleFrom(
                      primary: _modelos[index] == _modelo ? Color.fromRGBO(180, 4, 4, 1) : Color.fromRGBO(0, 0, 0, 0),
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(25.0),
                          side: BorderSide(color: _modelo == _modelos[index] ? Color.fromRGBO(180, 4, 4, 1) : Colors.black26)
                      ),
                    ),
                  );
                },
                separatorBuilder: (context, index){
                  return SizedBox(width: 8.0);
                },
              ),
            ),
            _child
          ],
        ),
      ),
    );
  }
}
