import 'dart:html';
import 'dart:js' as js;
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';

class CreateEnvForm extends StatefulWidget {
  CreateEnvForm(GrpcWebClientChannel channel, {super.key})
      : environmentsGrpc = EnvironmentsGrpc(channel);
  final EnvironmentsGrpc environmentsGrpc;
  @override
  State<StatefulWidget> createState() => _CreateEnvFormState();
}

class _CreateEnvFormState extends State<CreateEnvForm> {
  final _formKey = GlobalKey<FormState>();

  final nameCtl = TextEditingController();
  final descriptionCtl = TextEditingController();
  String? serverLocation;
  String? serverType;

  void createEnvironment() {
    // Validate returns true if the form is valid, or false otherwise.
    if (_formKey.currentState!.validate()) {
      final name = nameCtl.text;
      final description = descriptionCtl.text;
      widget.environmentsGrpc
          .create(
              EnvironmentLocalData(
                  serverType: serverType!,
                  serverLocation: serverLocation!,
                  provider: "",
                  name: name,
                  description: description),
              SoftplayerCredsHelpers().fromLocalStorage())
          .then((rs) {
        Navigator.pop(context);
      }).catchError((e) {
        print(e);
        GrpcError error = e;
        String msg;
        if (error.message != null) {
          msg = error.message!;
        } else {
          msg = error.toString();
        }
        ScaffoldMessenger.of(context).showSnackBar(SnackBar(
          content: Text(msg),
          backgroundColor: Colors.red,
          showCloseIcon: true,
          behavior: SnackBarBehavior.floating,
        ));
      });
    }
  }

  Widget createEnvForm() => SizedBox(
      width: 420,
      child: Form(
          key: _formKey,
          child: Center(
              child: Column(children: [
            Divider(),
            Text("Provider the environment metadata"),
            TextFormField(
              autofocus: true,
              controller: nameCtl,
              decoration: const InputDecoration(
                hintText: "Enter the environment name",
                icon: Icon(Icons.computer),
                label: Text("Name"),
              ),
              cursorWidth: 1,
              cursorHeight: 18,
              cursorRadius: const Radius.circular(10),
            ),
            TextFormField(
              autofocus: true,
              controller: descriptionCtl,
              decoration: const InputDecoration(
                hintText: "Enter the environment description",
                icon: Icon(Icons.description),
                label: Text("Description"),
              ),
              maxLength: 360,
              cursorWidth: 1,
              cursorHeight: 18,
              cursorRadius: const Radius.circular(10),
            ),
            Divider(),
            DropdownButtonFormField(
              decoration: const InputDecoration(
                hintText: "Enter the environment description",
                icon: Icon(Icons.computer),
                label: Text("Type of the server"),
              ),
              value: null,
              isDense: true,
              items: [
                DropdownMenuItem(
                  child: Text("lala1"),
                  value: "test1",
                ),
                DropdownMenuItem(child: Text("lala2"), value: "test2"),
                DropdownMenuItem(child: Text("lala3"), value: "test3"),
                DropdownMenuItem(child: Text("lala4"), value: "test4"),
              ],
              onChanged: (value) => print(value),
            ),
            TextButton(
              onPressed: () => js.context.callMethod(
                  'open', ['https://stackoverflow.com/questions/ask']),
              child: Text("Read more about environment types here"),
            )
          ]))));
  List<Widget> createEnvActions() => [
        TextButton(
          onPressed: createEnvironment,
          child: const Text('OK'),
        ),
      ];

  @override
  Widget build(BuildContext context) => AlertDialog(
        title: const Text("Create a new environment"),
        content: createEnvForm(),
        actions: createEnvActions(),
      );
}