import 'package:flutter/material.dart';
import 'package:grpc/grpc_web.dart';
import 'package:softplayer_web/api/grpc/creds.dart';
import 'package:softplayer_web/api/grpc/environments.dart';
import 'package:softplayer_web/components/environment_card.dart';

class EnvirnomentList extends StatefulWidget {
  const EnvirnomentList({
    super.key,
    required this.channel,
  });
  final GrpcWebClientChannel channel;
  @override
  State<StatefulWidget> createState() => _EnvirnomentListState();
}

class _EnvirnomentListState extends State<EnvirnomentList> {
  late EnvironmentsGrpc envGrpc;
  List<String> envs = [];
  @override
  void initState() {
    super.initState();
    envGrpc = EnvironmentsGrpc(widget.channel);
  }

  final GlobalKey<ScaffoldState> _key = GlobalKey(); // Create a key

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        key: _key,
        endDrawer: const Drawer(child: Text("Env")),
        body: Container(
            width: double.infinity,
            height: double.infinity,
            decoration: const BoxDecoration(
                gradient: LinearGradient(colors: [
              Colors.blueGrey,
              Colors.cyan,
              Colors.yellow,
            ])),
            child: StreamBuilder(
                stream:
                    envGrpc.list(SoftplayerCredsHelpers().fromLocalStorage()),
                builder: (context, snapshot) {
                  if (snapshot.connectionState == ConnectionState.waiting) {
                    return const CircularProgressIndicator();
                  } else if (snapshot.connectionState == ConnectionState.done) {
                    if (snapshot.hasError) {
                      return const Text('Error!');
                    } else {
                      if (snapshot.hasData) {
                        var data = snapshot.requireData;
                        if (data.isNotEmpty) {
                          return Container(
                            margin: const EdgeInsetsDirectional.fromSTEB(
                                50.0, 20.0, 50.0, 10.0),
                            child: Column(children: [
                              Flexible(
                                child: Container(
                                  child: const TextField(
                                    decoration: InputDecoration(
                                        fillColor: Colors.white,
                                        filled: true,
                                        labelText: "Search",
                                        prefixIcon: Icon(Icons.search)),
                                  ),
                                ),
                              ),
                              Container(
                                child: Flexible(
                                    child: GridView.count(
                                  childAspectRatio: (30 / 13),
                                  crossAxisCount: 4,
                                  children: snapshot.data!
                                      .map((e) => EnvirnomentCard(
                                            env: e,
                                          ))
                                      .toList(),
                                )),
                              )
                            ]),
                          );
                        } else {
                          return Center(
                              child: Container(
                            height: 300,
                            decoration: BoxDecoration(
                              border: Border.all(),
                              shape: BoxShape.rectangle,
                              borderRadius:
                                  const BorderRadius.all(Radius.circular(10)),
                              color: const Color.fromRGBO(100, 150, 80, 20),
                            ),
                            child: const Text(
                                "To get strated, use the button in the corner"),
                          ));
                        }
                      }
                    }
                  }
                  return const Text("err");
                })));
  }
}