import 'dart:developer';
import 'dart:io';

import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.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/loading.dart';
import 'package:manager_app/Components/message_notification.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/Helpers/FileHelper.dart';
import 'package:manager_app/Models/managerContext.dart';
import 'package:manager_app/Screens/Configurations/section_reorderList.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:provider/provider.dart';
import 'package:intl/intl.dart';
import 'dart:html' as html;


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<SectionDTO> sections;

  @override
  Widget build(BuildContext context) {
    final appContext = Provider.of<AppContext>(context);
    Size size = MediaQuery.of(context).size;
    return 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: Loading()
                )
            );
          }
        }
    );
  }

  Widget bodyConfiguration(ConfigurationDTO configurationDTO, Size size, AppContext appContext, BuildContext context)  {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Container(
          height: size.height *0.11,
          child: SingleChildScrollView(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Align(
                    alignment: AlignmentDirectional.bottomStart,
                    child: Padding(
                      padding: const EdgeInsets.all(10.0),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Row(
                            children: [
                              Text(configurationDTO.label, style: TextStyle(fontSize: 30, fontWeight: FontWeight.w400)),
                              InkWell(
                                onTap: () async {
                                  try {
                                    // Export config
                                    Client clientAPI = appContext.getContext().clientAPI;
                                    ExportConfigurationDTO export = await clientAPI.configurationApi.configurationExport(configurationDTO.id);

                                    if (kIsWeb) {
                                      html.AnchorElement anchorElement =  new html.AnchorElement();
                                      var uri = (Uri.parse(appContext.getContext().clientAPI.resourceApi.apiClient.basePath+'/api/Configuration/${configurationDTO.id}/export'));
                                      anchorElement.href = uri.toString();
                                      anchorElement.download = '${configurationDTO.label}.json';
                                      anchorElement.click();
                                    } else {
                                      File test = await FileHelper().storeConfiguration(export);
                                      showNotification(Colors.green, kWhite, "L'export de la configuration a réussi, le document se trouve là : " + test.path, context, 3000);
                                    }
                                  } catch(e) {
                                    log(e);
                                    showNotification(kPrimaryColor, kWhite, "L'export de la configuration a échoué", context, null);
                                  }
                                },
                                child: Padding(
                                  padding: const EdgeInsets.only(left: 5.0),
                                  child: Icon(Icons.cloud_download, color: kPrimaryColor)
                                ),
                              ),
                            ],
                          ),
                          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(
          //height: size.height *0.76,
          child: SingleChildScrollView(
            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: [
                              StringInputContainer(
                                label: "Nom :",
                                initialValue: configurationDTO.label,
                                onChanged: (value) {
                                  configurationDTO.label = value;
                                },
                              ),
                              MultiSelectContainer(
                                label: "Langues :",
                                initialValue: configurationDTO.languages != null ? configurationDTO.languages: [],
                                values: languages,
                                isMultiple: true,
                                isAtLeastOne: true,
                                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 fond d'écran :",
                                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) {
                                sections = new List<SectionDTO>.from(snapshot.data).where((section) => !section.isSubSection).toList();
                                return bodyGrid(configurationDTO, size, appContext);
                              } else if (snapshot.connectionState == ConnectionState.none) {
                                return Text("No data");
                              } else {
                                return Center(
                                    child: Container(
                                        height: size.height * 0.15,
                                        child: Loading()
                                    )
                                );
                              }
                            }
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),// FIELDS SECTION
        Container(
          //height: size.height *0.09,
          child: SingleChildScrollView(
              child: getButtons(configurationDTO, appContext)
          )
        )
      ],
    );
  }

  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: () {
                cancel(configurationDTO, appContext);
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: RoundedButton(
              text: "Supprimer",
              icon: Icons.delete,
              color: kPrimaryColor,
              textColor: Colors.white,
              fontSize: 15,
              press: () {
                delete(configurationDTO, appContext);
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: RoundedButton(
              text: "Sauvegarder",
              icon: Icons.done,
              color: kSuccess,
              textColor: Colors.white,
              fontSize: 15,
              press: () {
                save(configurationDTO, appContext);
              },
            ),
          ),
        ],
      ),
    );
  }

  Widget bodyGrid(ConfigurationDTO configurationDTO, Size size, AppContext appContext)  {
    return SingleChildScrollView(
      child: Container(
        height: size.height *0.40,
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: SectionReorderList(
            sectionsIn: sections,
            configurationId: configurationDTO.id,
            onChangedOrder: (List<SectionDTO> sectionsOut) async {
              sections = sectionsOut;

              // Update section order
              ManagerAppContext managerAppContext = appContext.getContext();
              await managerAppContext.clientAPI.sectionApi.sectionUpdateOrder(sections);
            },
        ),
        ),
      ),
    );
  }

  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<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> 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);

    showNotification(Colors.green, kWhite, 'La configuration a été sauvegardée avec succès', context, null);
  }

  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);
    sections.sort((a, b) => a.order.compareTo(b.order));
    return sections;
  }
}

boxDecoration(dynamic element) {
  return BoxDecoration(
    color: element.id == null ? kSuccess : 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
      ),
    ],
  );
}