import 'dart:math';
import 'package:flutter/material.dart';
import 'package:gomix_flutter/mixer_state.dart';
import 'package:gomix_flutter/select_button.dart';

const List<DropdownMenuEntry<String>> availableBackends = [
  DropdownMenuEntry(value: "jack", label: "Jack")
];

const portTypes = ["Input", "Output"];

class CreatePortDialog {
  String portType = portTypes[0].toLowerCase();
  final GlobalKey<FormState> _portDialogForm = GlobalKey<FormState>();

  void show(
      BuildContext context,
      final void Function(Map<String, Object> data) sendAction,
      Port editPortRef,
      bool isNewPort) {
    Port editPort = Port.fromJson(editPortRef.toJson());
    showDialog<String>(
      context: context,
      builder: (BuildContext context) => AlertDialog(
        title: isNewPort ? const Text("Create Port") : const Text("Edit Port"),
        content:
            StatefulBuilder(builder: (BuildContext ctx, StateSetter setState) {
          return SizedBox(
            width: min(MediaQuery.of(context).size.width, 400),
            child: Form(
              key: _portDialogForm,
              child: Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                        TextFormField(
                          decoration: const InputDecoration(
                              labelText: "Name", border: OutlineInputBorder()),
                          onSaved: (String? value) {
                            editPort.name = value!;
                          },
                          initialValue: editPort.name,
                        ),
                      ] +
                      (isNewPort
                          ? [
                              const SizedBox(height: 15),
                              SelectButton(
                                options: portTypes,
                                defaultIndex: 0,
                                allowNull: false,
                                onChange: (int selection) {
                                  portType = portTypes[selection].toLowerCase();
                                },
                              ),
                              const SizedBox(height: 30),
                              DropdownMenu<String>(
                                initialSelection: availableBackends[0].value,
                                onSelected: (String? value) {
                                  editPort.properties.backend = value!;
                                },
                                label: const Text("Backend"),
                                dropdownMenuEntries: availableBackends,
                              ),
                            ]
                          : [])),
            ),
          );
        }),
        actions: <Widget>[
          TextButton(
            onPressed: () => Navigator.pop(context, 'Cancel'),
            child: const Text('Cancel'),
          ),
          TextButton(
            onPressed: () {
              _portDialogForm.currentState?.save();
              if (isNewPort) {
                sendAction({
                  "method": "createPort",
                  "portData": {
                    "name": editPort.name,
                    "backend": editPort.properties.backend,
                    "channels": 2,
                    "type": portType
                  }
                });
              } else {
                sendAction({
                  "method": "editPort",
                  "UUID": editPort.uuid,
                  "portProperties": {"name": editPort.name}
                });
              }
              Navigator.pop(context, 'Update');
            },
            child: isNewPort ? const Text("Create") : const Text("Update"),
          ),
        ],
      ),
    );
  }
}