import 'package:auto_size_text/auto_size_text.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
import 'package:manager_app/Components/color_picker_input_container.dart';
import 'package:manager_app/Components/confirmation_dialog.dart';
import 'package:manager_app/Components/multi_select_container.dart';
import 'package:manager_app/Components/rounded_button.dart';
import 'package:manager_app/Components/string_input_container.dart';
import 'package:manager_app/Models/managerContext.dart';
import 'package:manager_app/Screens/Configurations/new_section_popup.dart';
import 'package:manager_app/app_context.dart';
import 'package:manager_app/client.dart';
import 'package:manager_app/constants.dart';
import 'package:managerapi/api.dart';
import 'package:overlay_support/overlay_support.dart';
import 'package:provider/provider.dart';
import 'package:intl/intl.dart';

class ConfigurationDetailScreen extends StatefulWidget {
  final String id;
  ConfigurationDetailScreen({Key key, @required this.id}) : super(key: key);

  @override
  _ConfigurationDetailScreenState createState() => _ConfigurationDetailScreenState();
}

class _ConfigurationDetailScreenState extends State<ConfigurationDetailScreen> {
  ConfigurationDTO configurationDTO;
  SectionDTO selectedSection;
  List<String> languages =  ["FR", "NL", "EN", "DE"];

  @override
  Widget build(BuildContext context) {
    final appContext = Provider.of<AppContext>(context);
    Size size = MediaQuery.of(context).size;
    return Container(
      child: FutureBuilder(
          future: getConfiguration(this.widget, appContext.getContext().clientAPI),
          builder: (context, AsyncSnapshot<dynamic> snapshot) {
            if (snapshot.connectionState == ConnectionState.done) {
              return bodyConfiguration(snapshot.data, size, appContext, context);
            } else if (snapshot.connectionState == ConnectionState.none) {
              return Text("No data");
            } else {
              return Center(child: Container(height: size.height * 0.2, child: Text('LOADING TODO FRAISE')));
            }
          }
      ),
    );
  }

  Widget bodyConfiguration(ConfigurationDTO configurationDTO, Size size, AppContext appContext, BuildContext context)  {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Container(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Align(
                  alignment: AlignmentDirectional.bottomStart,
                  child: Padding(
                    padding: const EdgeInsets.all(10.0),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(configurationDTO.label, style: TextStyle(fontSize: 30, fontWeight: FontWeight.w400)),
                        Padding(
                          padding: const EdgeInsets.all(5.0),
                          child: Text(DateFormat('dd/MM/yyyy').format(configurationDTO.dateCreation), style: TextStyle(fontSize: 15, fontWeight: FontWeight.w200)),
                        ),
                      ],
                    ),
                  )
              ),
              Padding(
                padding: const EdgeInsets.all(10.0),
                child: Align(
                  alignment: AlignmentDirectional.centerEnd,
                  child: InkWell(
                      onTap: () {
                        ManagerAppContext managerAppContext = appContext.getContext();
                        managerAppContext.selectedConfiguration = null;
                        appContext.setContext(managerAppContext);
                      },
                      child: Container(
                          child: Icon(
                            Icons.arrow_back,
                            color: kPrimaryColor,
                            size: 50.0,
                          )
                      )
                  ),
                ),
              )
            ],
          ),
        ), // TITLE
        Container(
          child: Padding(
            padding: const EdgeInsets.all(10.0),
            child: Container(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: [
                        Column(
                          mainAxisAlignment: MainAxisAlignment.spaceAround,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            StringContainer(
                              label: "Nom :",
                              initialValue: configurationDTO.label,
                              onChanged: (value) {
                                configurationDTO.label = value;
                              },
                            ),
                            MultiSelectContainer(
                              label: "Langues :",
                              initialValue: configurationDTO.languages != null ? configurationDTO.languages: [],
                              values: languages,
                              onChanged: (value) {
                                var tempOutput = new List<String>.from(value);
                                configurationDTO.languages = tempOutput;
                                print(configurationDTO.languages);
                              },
                            ),
                          ],
                        ),
                        Column(
                          mainAxisAlignment: MainAxisAlignment.spaceAround,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            ColorPickerInputContainer(
                              label: "Couleur principal :",
                              color: configurationDTO.primaryColor,
                              onChanged: (value) {
                                configurationDTO.primaryColor = value;
                              },
                            ),
                            ColorPickerInputContainer(
                              label: "Couleur secondaire :",
                              color: configurationDTO.secondaryColor,
                              onChanged: (value) {
                                configurationDTO.secondaryColor = value;
                              },
                            ),
                          ],
                        )
                      ],
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(20.0),
                    child: Container(
                      decoration: BoxDecoration(
                        shape: BoxShape.rectangle,
                        borderRadius: BorderRadius.circular(25.0),
                        border: Border.all(width: 0.5, color: kSecond)
                      ),
                      child: FutureBuilder(
                          future: getSections(configurationDTO, appContext.getContext().clientAPI),
                          builder: (context, AsyncSnapshot<dynamic> snapshot) {
                            if (snapshot.connectionState == ConnectionState.done) {
                              var tempOutput = new List<SectionDTO>.from(snapshot.data);
                              tempOutput.add(SectionDTO(id: null));
                              return bodyGrid(configurationDTO, tempOutput, size, appContext);
                            } else if (snapshot.connectionState == ConnectionState.none) {
                              return Text("No data");
                            } else {
                              return Center(child: Container(height: size.height * 0.2, child: Text('LOADING TODO FRAISE')));
                            }
                          }
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),// FIELDS SECTION
        getButtons(configurationDTO, appContext),
      ],
    );
  }

  getElement(dynamic element, Size size) {
    if (element.id != null) {
      return Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Align(
            alignment: Alignment.centerLeft,
            child: AutoSizeText(
              element.label,
              style: new TextStyle(fontSize: 25),
              maxLines: 1,
            ),
          ),
        ],
      );
    } else {
      return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Icon(
            Icons.add,
            color: kTextLightColor,
            size: 40.0,
          ),
          Container(
            height: size.height*0.05,
            child: AutoSizeText(
              "Nouvelle section",
              maxLines: 2,
              style: new TextStyle(color: kWhite, fontWeight: FontWeight.w400),
              minFontSize: 2,
              maxFontSize: 40,
              textAlign: TextAlign.center,
            ),
          )
        ],
      );
    }
  }

  getButtons(ConfigurationDTO configurationDTO, AppContext appContext) {
    return Align(
      alignment: AlignmentDirectional.bottomCenter,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          Padding(
            padding: const EdgeInsets.all(10.0),
            child: RoundedButton(
              text: "Annuler",
              icon: Icons.undo,
              color: Colors.grey,
              textColor: Colors.white,
              fontSize: 15,
              press: () {
                print("Annuler pressed");
                cancel(configurationDTO, appContext);
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: RoundedButton(
              text: "Supprimer",
              icon: Icons.delete,
              color: Colors.red,
              textColor: Colors.white,
              fontSize: 15,
              press: () {
                print("Supprimer pressed");
                delete(configurationDTO, appContext);
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: RoundedButton(
              text: "Sauvegarder",
              icon: Icons.done,
              color: Colors.lightGreen,
              textColor: Colors.white,
              fontSize: 15,
              press: () {
                save(configurationDTO, appContext);
                print("Sauvegarder pressed");
              },
            ),
          ),
        ],
      ),
    );
  }

  Widget bodyGrid(ConfigurationDTO configurationDTO, data, Size size, AppContext appContext)  {
    return SingleChildScrollView(
      child: Container(
        height: size.height *0.40,
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: GridView.builder(
              shrinkWrap: true,
              gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 8),
              itemCount: data.length,
              itemBuilder: (BuildContext context, int index) {
                return
                  InkWell(
                    onTap: () {
                      if (data[index].id == null) {
                        showNewSection(configurationDTO, appContext, context);
                      } else {
                        setState(() {
                          ManagerAppContext managerAppContext = appContext.getContext();
                          managerAppContext.selectedSection = data[index];
                          selectedSection = data[index];
                          appContext.setContext(managerAppContext);
                        });
                      }
                    },
                    child: Container(
                      decoration: boxDecoration(data[index]),
                      padding: const EdgeInsets.all(15),
                      margin: EdgeInsets.symmetric(vertical: 15, horizontal: 15),
                      child: Align(
                          alignment: Alignment.center,
                          child: getElement(data[index], size)
                      ),
                    ),
                  );
              }
          ),
        ),
      ),
    );
  }

  Future<void> save(ConfigurationDTO configurationDTO, AppContext appContext) async {
    ConfigurationDTO configuration = await appContext.getContext().clientAPI.configurationApi.configurationUpdate(configurationDTO);
    ManagerAppContext managerAppContext = appContext.getContext();
    managerAppContext.selectedConfiguration = configuration;
    appContext.setContext(managerAppContext);

    // popup a toast.
    toast('La configuration a été sauvegardée avec succès');

    // show a notification at top of screen.
    /*showSimpleNotification(
        Text("La configuration a été sauvegardée avec succès"),
        position: NotificationPosition.bottom,
        background: Colors.green);*/
  }

  Future<void> delete(ConfigurationDTO configurationDTO, AppContext appContext) async {
    showConfirmationDialog(
      "Êtes-vous sûr de vouloir supprimer cette configuration ?",
      () {},
      () async {
        ManagerAppContext managerAppContext = appContext.getContext();
        await appContext.getContext().clientAPI.configurationApi.configurationDelete(configurationDTO.id);
        managerAppContext.selectedConfiguration = null;
        appContext.setContext(managerAppContext);
      },
      context
    );
  }

  Future<void> cancel(ConfigurationDTO configurationDTO, AppContext appContext) async {
    ManagerAppContext managerAppContext = appContext.getContext();
    ConfigurationDTO configuration = await appContext.getContext().clientAPI.configurationApi.configurationGetDetail(configurationDTO.id);
    managerAppContext.selectedConfiguration = configuration;
    appContext.setContext(managerAppContext);
  }

  Future<ConfigurationDTO> getConfiguration(ConfigurationDetailScreen widget, Client client) async {
    ConfigurationDTO configuration = await client.configurationApi.configurationGetDetail(widget.id);
    return configuration;
  }

  Future<List<SectionDTO>> getSections(ConfigurationDTO configurationDTO, Client client) async {
    List<SectionDTO> sections = await client.sectionApi.sectionGetFromConfiguration(configurationDTO.id);
    return sections;
  }
}

boxDecoration(dynamic element) {
  return BoxDecoration(
    color: element.id == null ? Colors.lightGreen : kTextLightColor,
    shape: BoxShape.rectangle,
    borderRadius: BorderRadius.circular(25.0),
    boxShadow: [
      BoxShadow(
        color: kSecond,
        spreadRadius: 0.5,
        blurRadius: 5,
        offset: Offset(0, 1.5), // changes position of shadow
      ),
    ],
  );
}