import 'package:flutter/material.dart';
import 'package:oc_front/models/response.dart';
import 'package:oc_front/core/services/router.dart';
import 'package:oc_front/core/services/specialized_services/shared_service.dart';

class NewBoxSharedWidget extends StatefulWidget {
  String? _selected;
  SharedService service = SharedService();
  final TextEditingController _ctrl = TextEditingController();
  final TextEditingController _ctrlDescr = TextEditingController();
  NewBoxSharedWidget ({ super.key, });
  @override NewBoxSharedWidgetState createState() => NewBoxSharedWidgetState();
}
class NewBoxSharedWidgetState extends State<NewBoxSharedWidget> {
  GlobalKey<FormFieldState> key = GlobalKey<FormFieldState>();
  GlobalKey<FormFieldState> key2 = GlobalKey<FormFieldState>();
  @override Widget build(BuildContext context) {
    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: [
                const Padding(padding: EdgeInsets.symmetric(horizontal: 10), child: 
                  Text("load or create a new shared workspace", style: 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))),
                ),
                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))),
                ]), 
              ],),
            ),
            FutureBuilder<APIResponse<RawData>>(
              future: widget.service.all(context),
                builder: (context, snapshot) {
                List<DropdownMenuItem> items = [];
                if (snapshot.data != null && snapshot.data!.data != null) {
                  for (var item in snapshot.data!.data!.values) {
                    items.add(DropdownMenuItem<String>(
                      value: item["id"].toString(),
                      child: Text(item["name"].toString()),
                    ));
                  }
                }
                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  Row( 
                mainAxisAlignment: MainAxisAlignment.center,
                children : [ 
                  SizedBox( width: MediaQuery.of(context).size.width <= 540 ? MediaQuery.of(context).size.width - 140 : 400, height: 50, 
                    child: DropdownButtonFormField(
                      value: widget._selected,
                      isExpanded: true,
                      hint: const Text("load shared workspace...", style: TextStyle(color: Colors.grey, fontSize: 15)),
                      decoration: InputDecoration( 
                        filled: true,
                        focusedBorder: const OutlineInputBorder( borderRadius: BorderRadius.zero,
                            borderSide: BorderSide(color: Color.fromARGB(38, 166, 154, 1), width: 0),
                        ),
                        fillColor: Colors.grey.shade300,
                        contentPadding: const EdgeInsets.only(left: 30, right: 30, top: 10, bottom: 30),
                        enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.zero,
                            borderSide: BorderSide(color: Colors.grey.shade300, width: 0),
                        ),
                        border: OutlineInputBorder( borderRadius: BorderRadius.zero,
                          borderSide: BorderSide(color: Colors.grey.shade300, width: 0)),
                      ),
                      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: () { 
                        if (widget._selected == null || widget._selected!.isEmpty) { return; }
                        setState(() {  widget._selected = null; }); 
                      },
                      child: Container( 
                        width: 50, height: 50,
                        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 shared workspace selected',
                    child: InkWell( 
                      mouseCursor: widget._selected == null || widget._selected!.isEmpty  
                        ? MouseCursor.defer : SystemMouseCursors.click,
                      onTap: () async { 
                      },
                      child: Container(
                        width: 50, height: 50,
                        color: Colors.black,
                        child: Icon(Icons.open_in_browser_outlined, 
                        color: widget._selected == null || widget._selected!.isEmpty ? Colors.grey : Colors.white),
                      )
                    )
                  )
                 ]);}),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Container(
                          margin: const EdgeInsets.only(top: 10),
                          width: MediaQuery.of(context).size.width <= 540 ? MediaQuery.of(context).size.width - 90 : 450,
                          height: 50,
                          child: TextFormField( key: key,
                            expands: true,
                            maxLines: null,
                            minLines: null,
                            cursorColor: const Color.fromARGB(38, 166, 154, 1),
                            controller: widget._ctrl,
                            onChanged: (value) { widget._ctrl.text = value; }, 
                            validator: (value) => value == null || value.isEmpty ? "name is required" : null,
                            decoration: InputDecoration(
                              hintText: "name a new shared workspace...",
                              fillColor: Colors.grey.shade300,
                              filled: true,
                              errorStyle: const TextStyle(fontSize: 0),
                              contentPadding: const EdgeInsets.only(left: 30, right: 30, top: 15, bottom: 5),
                              hintStyle: const 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 (key.currentState!.validate() && key2.currentState!.validate()) {
                                await widget.service.post(context, {
                                  "name" :widget._ctrl.value.text, 
                                  "description" : widget._ctrlDescr.value.text }, {});
                              }
                            },
                            child: Container(
                              margin: const EdgeInsets.only(top: 10),
                              width: 50,
                              height: 50,
                              color: Colors.black,
                              child: Icon(Icons.add, color: widget._ctrl.value.text.isEmpty ? Colors.grey : Colors.white)
                            )
                          )
                        )
                ]),
            Container(
                          margin: const EdgeInsets.only(top: 10),
                          width: MediaQuery.of(context).size.width <= 540 ? MediaQuery.of(context).size.width - 40 : 500,
                          height: 50,
                          child: TextFormField( key: key2,
                            expands: true,
                            maxLines: null,
                            minLines: null,
                            cursorColor: const Color.fromARGB(38, 166, 154, 1),
                            controller: widget._ctrlDescr,
                            onChanged: (value) { widget._ctrlDescr.text = value; }, 
                            validator: (value) => value == null || value.isEmpty ? "name is required" : null,
                            decoration: InputDecoration(
                              hintText: "description of a new shared workspace...",
                              fillColor: Colors.grey.shade300,
                              filled: true,
                              errorStyle: const TextStyle(fontSize: 0),
                              contentPadding: const EdgeInsets.only(left: 30, right: 30, top: 15, bottom: 5),
                              hintStyle: const TextStyle(
                                color: Colors.black,
                                fontSize: 14,
                                fontWeight: FontWeight.w300
                              ),
                              border: InputBorder.none
                            )
                          )
                        ),
          ]
        )
    );
  }
}