import 'package:flutter/material.dart';
import 'package:oc_front/main.dart';
import 'package:oc_front/models/response.dart';
import 'package:oc_front/pages/shared.dart';

class ShallowDropdownInputWidget extends StatefulWidget {
  double? width;
  CollaborativeAreaType type = CollaborativeAreaType.workspace;
  Future<List<Shallow>> Function()? all;
  Future<void> Function(String)? load;
  Future<void>  Function(String)? remove;
  bool Function(String?)? canLoad;
  bool Function(String?)? canRemove;
  void Function(String?)? change;
  DropdownMenuItem Function(Shallow)? maptoDropdown;
  String? current;
  Widget? prefixIcon;
  IconData? iconLoad;
  IconData? iconRemove;

  String? hint;

  String? tooltipLoad;
  String? tooltipRemove;

  Color? filled;
  Color? hintColor;
  Color? color;

  bool deletion = false;

  ShallowDropdownInputWidget ({ Key? key, this.width, this.current, required this.all, this.prefixIcon,
  this.iconLoad, this.iconRemove, this.hint, this.filled, this.hintColor, this.color,
  this.tooltipLoad, this.tooltipRemove, this.deletion = false, this.maptoDropdown,
  required this.type, this.canLoad, this.canRemove, this.load, this.remove, this.change }): super(key: key);
  @override ShallowDropdownInputWidgetState createState() => ShallowDropdownInputWidgetState();
}
class ShallowDropdownInputWidgetState extends State<ShallowDropdownInputWidget> {
  @override Widget build(BuildContext context) {
    if (widget.deletion && widget.remove == null) {
      widget.remove =(p0) async => widget.current = null;
    }
    var t = widget.type == CollaborativeAreaType.workspace ? "workspace" : (widget.type == CollaborativeAreaType.workflow ? "workflow" : "peer");
    return FutureBuilder(future: widget.all!(), builder: (b, s) {
      List<DropdownMenuItem> items = [];
      if (widget.maptoDropdown != null) {
        items = s.data?.map((e) => widget.maptoDropdown!(e)).toList() ?? <DropdownMenuItem>[];
      } else {
        items = s.data?.map((e) => DropdownMenuItem(value: e.id,child: Text(e.name),)).toList() ?? <DropdownMenuItem>[];
      } 
      return Row( children: [
          Tooltip( message: widget.hint ?? "current $t", child:
          Theme(
            data: Theme.of(context).copyWith(
              canvasColor: widget.filled ??Colors.white,
            ),
            child: Container( height: 50, width: (widget.width ?? getMainWidth(context)) - (widget.load == null ? 0 : 50) - (widget.remove == null ? 0 : 50), 
            decoration: const BoxDecoration(
              color: Colors.white,
            ),  
            child:  DropdownButtonFormField(
                      onChanged: (value) {
                        setState(() {
                          widget.current = value;
                          if (widget.change != null) {
                            widget.change!(value);
                          }
                        });
                      },
                      value: widget.current != null && !items.map( ((e) => e.value)).contains(widget.current) ? null : widget.current,
                      isExpanded: true,
                      style: TextStyle(color: widget.color ?? Colors.black, fontSize: 15),
                      hint: Text(widget.hint ?? "load $t...", 
                        style: TextStyle(color: widget.hintColor ??midColor, fontSize: 14)),
                      icon:  Icon(                // Add this
                        Icons.arrow_drop_down,  // Add this
                        color: widget.hintColor ?? Colors.grey ,   // Add thisprefixIcon
                       ),
                      decoration: InputDecoration( 
                        filled: true,
                        prefixIconColor: Colors.grey,
                        prefixIcon: widget.prefixIcon,
                        suffixIconColor: widget.hintColor ?? Colors.grey ,
                        focusedBorder: InputBorder.none,
                        fillColor: widget.filled ??Colors.white,
                        enabledBorder: InputBorder.none,
                        border: InputBorder.none,
                        contentPadding: EdgeInsets.only(left: (widget.width ?? 400) < 200 ? 0 : 30, right: (widget.width ?? 400) < 200 ? 0 : 30, top: 18, bottom: 18),
                      ),
                      items: items, 
                      )))),
          widget.load == null ? Container() : Tooltip(
            message: widget.tooltipLoad ?? "load $t",
            child:InkWell( 
            mouseCursor: SystemMouseCursors.click,
            onTap: () async {
              if (widget.canLoad == null || !widget.canLoad!(widget.current) || widget.load == null || widget.current == null) {
                return;
              }
              await widget.load!(widget.current!);
              setState(() {  });
            },
            child: Container( width: 50,height: 50,
              color: Colors.black,
              child: Icon( widget.iconLoad ?? Icons.add, color: widget.current == null || widget.canLoad == null || !widget.canLoad!(widget.current) ? Colors.grey : Colors.white)
            )
          )
        ),
        widget.remove == null ? Container() : Tooltip(
            message: widget.tooltipRemove ?? "remove $t",
            child: InkWell( mouseCursor: SystemMouseCursors.click,
              onTap: () async {
                if (widget.canRemove == null || !widget.canRemove!(widget.current) || widget.remove == null || widget.current == null) {
                  return;
                }
                await widget.remove!(widget.current!);
                setState(() {  });
            },
            child: Container( width: 50,height: 50,
              decoration: BoxDecoration(color: Colors.black, border: Border(left: BorderSide(color: midColor))),
              child: Icon(widget.iconRemove ?? Icons.delete, color: widget.current == null || widget.canRemove == null || !widget.canRemove!(widget.current) ? Colors.grey : Colors.white)) )
          ),
        ]); });
  }
}