import 'package:flutter/material.dart';
import 'package:oc_front/main.dart';
import 'package:oc_front/models/response.dart';
import 'package:oc_front/core/services/router.dart';
import 'package:oc_front/pages/shared.dart';
import 'package:oc_front/widgets/inputs/shallow_dropdown_input.dart';
import 'package:oc_front/widgets/inputs/shallow_text_input.dart';

class ShallowCreationDialogWidget extends StatefulWidget {
  GlobalKey<ShallowTextInputWidgetState>? formKey;
  BuildContext context;
  bool Function()? canClose;
  CollaborativeAreaType type = CollaborativeAreaType.workspace;
  Future<List<Shallow>> Function()? all;
  Future<void> Function(String)? load;
  Future<void> Function(Map<String,dynamic>)? create;
  bool Function(String?)? canLoad;
  DropdownMenuItem Function(Shallow)? maptoDropdown;
  List<ShallowTextInputWidget> form = [];

  ShallowCreationDialogWidget ({ super.key, required this.type, required this.all, this.load, this.formKey,
    required this.create, this.form = const [], this.maptoDropdown, required this.context, this.canClose }) ;
  @override ShallowCreationDialogState createState() => ShallowCreationDialogState();
}
class ShallowCreationDialogState extends State<ShallowCreationDialogWidget> {
  GlobalKey<FormFieldState> key = GlobalKey<FormFieldState>();
  GlobalKey<FormFieldState> key2 = GlobalKey<FormFieldState>();
  @override Widget build(BuildContext context) {
    var t = widget.type == CollaborativeAreaType.workspace ? "workspace" : (widget.type == CollaborativeAreaType.workflow ? "workflow" : (widget.type == CollaborativeAreaType.collaborative_area ? "collaborative area" :"peer"));
    return Container(
      color: Colors.white,
      padding: const EdgeInsets.only( top: 0, bottom: 20, left: 20, right: 20),
      child: Column(
          children: [
            Container( 
              alignment: Alignment.centerRight,
              height: 50,
              child: Row( mainAxisAlignment: MainAxisAlignment.end, children: [
                Padding(padding: const EdgeInsets.symmetric(horizontal: 10), child: 
                  Text("load or create a new $t", style: const TextStyle(color: Colors.grey, fontSize: 15)
                )),
                Padding ( padding: const EdgeInsets.symmetric(horizontal: 10), child: 
                  Tooltip( message: "back", child: InkWell( 
                  mouseCursor: SystemMouseCursors.click,
                  onTap: () { 
                    AppRouter.catalog.go(context, {}); 
                  },
                  child: const Icon(Icons.arrow_back, color: Colors.black))),
                ),
                widget.canClose != null && !widget.canClose!() ? Container() :  Row ( mainAxisAlignment: MainAxisAlignment.end, children: [
                  Tooltip( message: "close", child: InkWell( 
                  mouseCursor: SystemMouseCursors.click,
                  onTap: () { Navigator.pop(context); },
                  child: const Icon(Icons.close, color: Colors.black))),
                ]), 
              ],),
            ),
            ShallowDropdownInputWidget(
              all: widget.all, 
              type: widget.type,
              hint: "select a $t",
              width: getMainWidth(context) <= 540 ? getMainWidth(context) - 140 : 400,
              load: (e) async {
                await widget.load!(e);
                Navigator.pop(widget.context);
              },
              iconLoad: Icons.open_in_browser_outlined,
              iconRemove: Icons.refresh,
              maptoDropdown: widget.maptoDropdown,
              canLoad: (p0) => p0 != null  && p0.isNotEmpty,
              canRemove: (p0) => p0 != null  && p0.isNotEmpty,
              tooltipRemove: "refresh selection",
              deletion: true,
              color: Colors.black,
              hintColor: Colors.grey,
              filled: midColor,
            ),
            Container( height: 10),
            widget.create != null ? ShallowTextInputWidget(
              key: widget.formKey,
              type: widget.type,
              hint: "create a new $t",
              width: getMainWidth(context) <= 540 ? getMainWidth(context) - 140 : 400,
              load: (e) async {
                await widget.create!(e);
                Navigator.pop(widget.context);
              },
              forms: widget.form,
              canLoad: (p0) => p0 != null && p0.isNotEmpty,
              color: Colors.black,
              hintColor: Colors.grey,
              filled: midColor,
            ) : Container(),
             ...(widget.create != null ? widget.form.map( (e) => Container( margin: const EdgeInsets.only(top: 10), child: e)) : []),
          ]
        )
    );
  }
}