import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:oc_front/core/services/specialized_services/workflow_service.dart';
import 'package:oc_front/models/response.dart';
import 'package:oc_front/pages/abstract_page.dart';

class WorkflowFactory implements AbstractFactory {
  static GlobalKey<WorkflowPageWidgetState> key = GlobalKey<WorkflowPageWidgetState>();
  @override bool searchFill() { return false; }
  @override Widget factory(GoRouterState state, List<String> args) { return WorkflowPageWidget(); }
  @override void search(BuildContext context) { }
}

class WorkflowPageWidget extends StatefulWidget {
  String? _selected;
  TextEditingController _ctrl = TextEditingController();
  WorkflowPageWidget () : super(key: WorkflowFactory.key);
  @override WorkflowPageWidgetState createState() => WorkflowPageWidgetState();
  static void search(BuildContext context) { }
  static Widget factory() { return WorkflowPageWidget(); }
}
class WorkflowPageWidgetState extends State<WorkflowPageWidget> {

  final WorflowService _service = WorflowService();
  @override Widget build(BuildContext context) {
    return SizedBox(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height - 200, 
      child: Column(
          children: [
            Container(
              width: MediaQuery.of(context).size.width,
              height: (MediaQuery.of(context).size.height - 200) / 2,
              child : Row( 
                mainAxisAlignment: MainAxisAlignment.center,
                children : [ 
                  Container( width:  MediaQuery.of(context).size.height / 1.5,
                    height: 50, margin: const EdgeInsets.only(top: 2),
                    child: FutureBuilder<APIResponse<RawData>>(
                      future: _service.all(context),
                      builder: (context, snapshot) {
                      List<DropdownMenuItem> items = [];
                      print(snapshot.error);
                      if (snapshot.hasData && snapshot.data!.data != null
                      && snapshot.data!.data!.values.isNotEmpty) {
                        items = (snapshot.data!.data!.values as List<dynamic>).map((dynamic value) {
                            return DropdownMenuItem<String>(
                              value: value.toString(),
                              child: Text(value.toString()),
                            );
                          }).toList();
                    }
                    if (widget._selected != null 
                    && !items.where((element) => element.value == widget._selected).isNotEmpty) { 
                      items.add(DropdownMenuItem<String>(
                              value: widget._selected.toString(),
                              child: Text(widget._selected.toString()),
                            ));
                    }
                    return DropdownButtonFormField(
                      value: widget._selected,
                      hint: const Text("select workflow to load...", style: TextStyle(color: Colors.grey, fontSize: 15)),
                      decoration: InputDecoration( 
                        filled: true,
                        focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.zero,
                            borderSide: BorderSide(color: Color.fromARGB(38, 166, 154, 1), width: 2.5),
                        ),
                        fillColor: Colors.grey.shade300,
                        contentPadding: const EdgeInsets.only(left: 30, right: 30),
                        enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.zero,
                            borderSide: BorderSide(color: Colors.grey.shade300, width: 2.5),
                        ),
                        border: OutlineInputBorder( borderRadius: BorderRadius.zero,
                          borderSide: BorderSide(color: Colors.grey.shade300, width: 2.5)),
                      ),
                      items: items, onChanged: (value) {
                        setState(() { widget._selected = value.toString(); });
                      }); 
                    })
                  ),
                  Tooltip(
                    message: 'empty selection',
                    child: InkWell( 
                      mouseCursor: widget._selected == null || widget._selected!.isEmpty ? MouseCursor.defer : SystemMouseCursors.click,
                      onTap: () { setState(() {  widget._selected = null; }); },
                      child: Container( 
                        width: 50, height: 48,
                        decoration: const BoxDecoration( color: Colors.black,
                          border: Border(right: BorderSide(color: Colors.white))),
                            child: Icon(Icons.refresh, color: widget._selected == null || widget._selected!.isEmpty  ? Colors.grey : Colors.white),
                        )
                   )
                  ),
                  Tooltip(
                    message: 'load workflow selected',
                    child: InkWell( 
                      mouseCursor: widget._selected == null || widget._selected!.isEmpty  ? MouseCursor.defer : SystemMouseCursors.click,
                      onTap: () {},
                      child: Container(
                        width: 50, height: 48,
                        color: Colors.black,
                        child: Icon(Icons.open_in_browser_outlined, 
                        color: widget._selected == null || widget._selected!.isEmpty ? Colors.grey : Colors.white),
                      )
                    )
                  )
                ]),
              ),
              Container(
              width: MediaQuery.of(context).size.width,
              height: (MediaQuery.of(context).size.height - 200)  / 2,
              color: Colors.grey.shade300,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Row( children: [
                        Container(
                          width: MediaQuery.of(context).size.width / 1.5,
                          height: 50,
                          child: TextFormField(
                            cursorColor: const Color.fromARGB(38, 166, 154, 1),
                            controller: widget._ctrl,
                            onChanged: (value) => setState(() { widget._ctrl.value = TextEditingValue(text: value); }), 
                            validator: (value) => value == null || value.isEmpty ? "name is required" : null,
                            decoration: const InputDecoration(
                              hintText: "name a new workflow...",
                              fillColor: Colors.white,
                              filled: true,
                              contentPadding: EdgeInsets.symmetric(horizontal: 30),
                              hintStyle: TextStyle(
                                color: Colors.black,
                                fontSize: 14,
                                fontWeight: FontWeight.w300
                              ),
                              border: InputBorder.none
                            )
                          )
                        ),
                        Tooltip(
                          message: 'add',
                          child:InkWell( 
                            mouseCursor: widget._ctrl.value.text.isEmpty ? MouseCursor.defer : SystemMouseCursors.click,
                            onTap: () async {
                              if (widget._ctrl.value.text.isNotEmpty) {
                                await _service.post(context, {}, { "workflowName" : widget._ctrl.value.text });
                                widget._selected = widget._ctrl.value.text;
                                widget._ctrl.value = const TextEditingValue(text: "");
                                setState(() { });
                              }
                            },
                            child: Container(
                              width: 50,
                              height: 50,
                              color: Colors.black,
                              child: Icon(Icons.add, color: widget._ctrl.value.text.isEmpty ? Colors.grey : Colors.white)
                            )
                          )
                        )
                      ],
                    ),
                ])
            )
          ]
        )
    );
  }
}