import 'package:flutter/material.dart';
import 'package:manager_app/Components/color_picker_input_container.dart';
import 'package:manager_app/Components/rounded_button.dart';
import 'package:manager_app/Components/slider_input_container.dart';
import 'package:manager_app/Components/string_input_container.dart';
import 'package:manager_app/Components/switch_input_container.dart';
import 'package:manager_app/Models/managerContext.dart';
import 'package:manager_app/app_context.dart';
import 'package:manager_app/constants.dart';
import 'package:manager_app/l10n/app_localizations.dart';
import 'package:manager_api_new/api.dart';

import '../../Components/resource_input_container.dart';
import 'dropDown_configuration.dart';

showChangeInfo(String text, DeviceDTO inputDevice, AppConfigurationLinkDTO appConfiguration, Function onGetResult, int maxLines, BuildContext mainContext, dynamic appContext) async {
  var result = await showDialog(
      useRootNavigator: false,
      builder: (BuildContext context) => Dialog(
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(20.0))
        ),
        child: SizedBox(
          width: 580,
          child: Padding(
            padding: const EdgeInsets.fromLTRB(24, 20, 24, 24),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Center(child: Text(text, style: const TextStyle(fontSize: 20, fontWeight: FontWeight.w500))),
                const SizedBox(height: 16),
                Flexible(
                  child: SingleChildScrollView(
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        _sectionTitle("Identité"),
                        Wrap(
                          spacing: 16,
                          runSpacing: 12,
                          children: [
                            SizedBox(
                              width: 220,
                              height: 90,
                              child: StringInputContainer(
                                label: "Nom:",
                                initialValue: inputDevice.name,
                                onChanged: (value) => inputDevice.name = value,
                                maxLength: 20,
                              ),
                            ),
                            Row(
                              mainAxisSize: MainAxisSize.min,
                              children: [
                                Text("Configuration:", style: const TextStyle(fontSize: 16, fontWeight: FontWeight.w400)),
                                const SizedBox(width: 8),
                                FutureBuilder(
                                  future: getConfigurations(appContext),
                                  builder: (context, AsyncSnapshot<dynamic> snapshot) {
                                    if (snapshot.connectionState == ConnectionState.done) {
                                      if (snapshot.data != null && snapshot.data.length > 0) {
                                        return DropDownConfig(
                                          configurations: snapshot.data,
                                          selectedConfigurationId: inputDevice.configurationId!,
                                          onChange: (ConfigurationDTO configurationOut) {
                                            inputDevice.configuration = configurationOut.label;
                                            inputDevice.configurationId = configurationOut.id;
                                          },
                                        );
                                      } else {
                                        return Text(AppLocalizations.of(context)!.noConfigFound);
                                      }
                                    } else if (snapshot.connectionState == ConnectionState.none) {
                                      return const Text("No data");
                                    } else {
                                      return const SizedBox(width: 24, height: 24, child: CircularProgressIndicator(strokeWidth: 2));
                                    }
                                  }
                                ),
                              ],
                            ),
                          ],
                        ),
                        const Divider(height: 32),
                        _sectionTitle("Apparence"),
                        Wrap(
                          spacing: 16,
                          runSpacing: 12,
                          children: [
                            ColorPickerInputContainer(
                              label: "Couleur principale :",
                              fontSize: 16,
                              color: appConfiguration.primaryColor,
                              showHex: true,
                              onChanged: (value) => appConfiguration.primaryColor = value,
                            ),
                            ColorPickerInputContainer(
                              label: AppLocalizations.of(context)!.backgroundColorLabel,
                              fontSize: 16,
                              color: appConfiguration.secondaryColor,
                              showHex: true,
                              onChanged: (value) => appConfiguration.secondaryColor = value,
                            ),
                            ResourceInputContainer(
                              label: "Loader :",
                              initialValue: appConfiguration.loaderImageId,
                              color: kPrimaryColor,
                              imageFit: BoxFit.fitHeight,
                              onChanged: (ResourceDTO resource) async {
                                if (resource.id == null) {
                                  appConfiguration.loaderImageId = null;
                                  appConfiguration.loaderImageUrl = null;
                                } else {
                                  appConfiguration.loaderImageId = resource.id;
                                  appConfiguration.loaderImageUrl = resource.url;
                                }
                              },
                            ),
                          ],
                        ),
                        const Divider(height: 32),
                        _sectionTitle("Mise en page"),
                        SliderInputContainer(
                          label: "Place des sections (%) :",
                          fontSize: 16,
                          initialValue: (appConfiguration.screenPercentageSectionsMainPage ?? 0).toDouble(),
                          min: 0,
                          max: 100,
                          color: kPrimaryColor,
                          onChanged: (value) => appConfiguration.screenPercentageSectionsMainPage = value.round(),
                        ),
                        SliderInputContainer(
                          label: "Pourcentage des arrondis (0-50) :",
                          fontSize: 16,
                          initialValue: (appConfiguration.roundedValue ?? 0).toDouble(),
                          min: 0,
                          max: 50,
                          color: kPrimaryColor,
                          onChanged: (value) => appConfiguration.roundedValue = value.round(),
                        ),
                        const Divider(height: 32),
                        _sectionTitle("Options"),
                        Wrap(
                          spacing: 16,
                          runSpacing: 8,
                          children: [
                            SwitchInputContainer(
                              icon: Icons.image,
                              label: "Fond pour les images des sections :",
                              fontSize: 16,
                              isChecked: appConfiguration.isSectionImageBackground,
                              onChanged: (value) => appConfiguration.isSectionImageBackground = value,
                            ),
                            SwitchInputContainer(
                              icon: Icons.watch_later_outlined,
                              label: "Heure :",
                              fontSize: 16,
                              isChecked: appConfiguration.isHour,
                              onChanged: (value) => appConfiguration.isHour = value,
                            ),
                            SwitchInputContainer(
                              icon: Icons.date_range,
                              label: "Date :",
                              fontSize: 16,
                              isChecked: appConfiguration.isDate,
                              onChanged: (value) => appConfiguration.isDate = value,
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ),
                const SizedBox(height: 16),
                Wrap(
                  spacing: 8,
                  runSpacing: 8,
                  alignment: WrapAlignment.end,
                  children: [
                    RoundedButton(
                      text: "Annuler",
                      icon: Icons.undo,
                      color: kSecond,
                      press: () => Navigator.of(context).pop(),
                      fontSize: 16,
                    ),
                    RoundedButton(
                      text: "Changer",
                      icon: Icons.check,
                      color: kPrimaryColor,
                      textColor: kWhite,
                      press: () {
                        onGetResult(inputDevice, appConfiguration);
                        Navigator.of(context).pop();
                      },
                      fontSize: 16,
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ), context: mainContext
  );
}

Widget _sectionTitle(String title) {
  return Padding(
    padding: const EdgeInsets.only(bottom: 12),
    child: Text(title, style: kSectionLabelStyle),
  );
}

getConfigurationsElement(DeviceDTO inputDevice, data, Function onGetResult) {
  List<Widget> widgets = <Widget>[];
  for (var configuration in data as List<ConfigurationDTO>) {
    var widget = new InkWell(
      onTap: () {
        inputDevice.configuration = configuration.label;
        inputDevice.configurationId = configuration.id;
      },
      child: Ink(
        color: inputDevice.configurationId == configuration.id ? kPrimaryColor : null,
        child: ListTile(
          leading: Icon(Icons.account_tree_rounded),
          title: Text(configuration.label!),
        ),
      ),
    );
    widgets.add(widget);
  }
  return widgets;
}

Future<List<ConfigurationDTO>?> getConfigurations(AppContext appContext) async {
  return (appContext.getContext() as ManagerAppContext)
      .clientAPI!
      .configurationApi!
      .configurationGet(instanceId: (appContext.getContext() as ManagerAppContext).instanceId);
}