import 'dart:convert';
import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';
import 'package:manager_app/Components/check_input_container.dart';
import 'package:manager_app/Components/confirmation_dialog.dart';
import 'package:manager_app/Components/fetch_section_icon.dart';
import 'package:manager_app/Components/resource_input_container.dart';
import 'package:manager_app/Components/common_loader.dart';
import 'package:manager_app/Components/message_notification.dart';
import 'package:manager_app/Components/multi_string_input_container.dart';
import 'package:manager_app/Components/number_input_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/Section/SubSection/WebOrVideo/web_video_config.dart';
import 'package:manager_app/app_context.dart';
import 'package:manager_app/client.dart';
import 'package:manager_app/constants.dart';
import 'package:manager_api_new/api.dart';
import 'package:provider/provider.dart';
import 'package:intl/intl.dart';

import 'SubSection/Agenda/agenda_config.dart';
import 'SubSection/Article/article_config.dart';
import 'SubSection/Article/download_pdf.dart';
import 'SubSection/Map/map_config.dart';
import 'SubSection/Menu/menu_config.dart';
import 'SubSection/PDF/PDF_config.dart';
import 'SubSection/Puzzle/puzzle_config.dart';
import 'SubSection/Quizz/quizz_config.dart';
import 'SubSection/Slider/slider_config.dart';
import 'package:qr_flutter/qr_flutter.dart';
import 'package:pasteboard/pasteboard.dart';

import 'dart:html' as html;

import 'SubSection/Weather/weather_config.dart';

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

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

class _SectionDetailScreenState extends State<SectionDetailScreen> {
  late SectionDTO sectionDTO;
  late Object sectionDetailDTO;

  @override
  Widget build(BuildContext context) {
    final appContext = Provider.of<AppContext>(context);
    Size size = MediaQuery.of(context).size;

    GlobalKey globalKey = new GlobalKey();
    Object? rawSectionData;

    return FutureBuilder(
        future: getSection(widget.id, (appContext.getContext() as ManagerAppContext).clientAPI!),
        builder: (context, AsyncSnapshot<dynamic> snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            rawSectionData = snapshot.data;

            var nullableSection = SectionDTO.fromJson(rawSectionData);

            if(nullableSection != null) {
              sectionDTO = nullableSection;
              return Stack(
                children: [
                  bodySection(rawSectionData, size, appContext, context, globalKey),
                  Align(
                    alignment: AlignmentDirectional.bottomCenter,
                    child: Container(
                      height: 80,
                      child: getButtons(sectionDTO, appContext),
                    ),
                  )
                ],
              );
            } else {
              return Center(child: Text("Une erreur est survenue lors de la récupération de la section"));
            }
          } else if (snapshot.connectionState == ConnectionState.none) {
            return Text("No data");
          } else {
            return Center(
                child: Container(
                    height: size.height * 0.2,
                    child: CommonLoader()
                )
            );
          }
        }
    );
  }

  Widget bodySection(Object? rawSectionDTO, Size size, AppContext appContext, BuildContext context, GlobalKey globalKey)  {
    ManagerAppContext managerAppContext = appContext.getContext();
    //SectionDTO? sectionDTO = SectionDTO.fromJson(rawSectionDTO);

    return SingleChildScrollView(
      child: Column(
        //mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Container(
            //color: Colors.orangeAccent,
            height: 82,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Align(
                    alignment: AlignmentDirectional.bottomStart,
                    child: Padding(
                      padding: const EdgeInsets.all(3.0),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Row(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              Padding(
                                padding: const EdgeInsets.all(8.0),
                                child: Icon(
                                  getSectionIcon(sectionDTO.type),
                                  color: kPrimaryColor,
                                  size: 25,
                                ),
                              ),
                              Text(sectionDTO.label!, style: TextStyle(fontSize: 30, fontWeight: FontWeight.w400)),
                              if((appContext.getContext() as ManagerAppContext).selectedConfiguration!.isMobile!)
                                DownloadPDF(sections: [sectionDTO]),
                            ],
                          ),
                          Padding(
                            padding: const EdgeInsets.all(5.0),
                            child: Text(DateFormat('dd/MM/yyyy').format(sectionDTO.dateCreation!), style: TextStyle(fontSize: 15, fontWeight: FontWeight.w200)),
                          ),
                        ],
                      ),
                    )
                ),
                Padding(
                  padding: const EdgeInsets.all(5.0),
                  child: Align(
                    alignment: AlignmentDirectional.centerEnd,
                    child: InkWell(
                        onTap: () {
                          ManagerAppContext managerAppContext = appContext.getContext();
                          managerAppContext.selectedSection = null;
                          appContext.setContext(managerAppContext);
                        },
                        child: Container(
                            child: Icon(
                              Icons.arrow_back,
                              color: kPrimaryColor,
                              size: 50.0,
                            )
                        )
                    ),
                  ),
                )
              ],
            ),
          ), // TITLE
          Container(
            //color: Colors.blue,
            child: Padding(
              padding: const EdgeInsets.all(5.0),
              child: Container(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Container(
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: [
                          if((appContext.getContext() as ManagerAppContext).selectedConfiguration!.isMobile!)
                            Column(
                              mainAxisAlignment: MainAxisAlignment.spaceAround,
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Row(
                                  crossAxisAlignment: CrossAxisAlignment.center,
                                  children: [
                                    InkWell(
                                      onTap: () async {
                                        var image = await _captureAndSharePng(globalKey, sectionDTO.id!);
                                        await readAndWriteFiles(image);
                                        showNotification(kSuccess, kWhite, 'Ce QR code a été copié dans le presse papier', context, null);
                                      },
                                      child: Container(
                                        width: size.width *0.1,
                                        height: 125,
                                        child: RepaintBoundary(
                                          key: globalKey,
                                          child: QrImageView(
                                            padding: EdgeInsets.only(left: 5.0, top: 5.0, bottom: 5.0, right: 5.0),
                                            data: "${managerAppContext.host!.replaceFirst("api", "web")}/${managerAppContext.instanceId}/${managerAppContext.selectedConfiguration!.id}/${sectionDTO.id!}",
                                            version: QrVersions.auto,
                                            size: 50.0,
                                          ),
                                        ),
                                      ),
                                    ),
                                    SelectableText(sectionDTO.id!, style: new TextStyle(fontSize: 15))
                                  ],
                                ),
                                CheckInputContainer(
                                  label: "Beacon :",
                                  isChecked: sectionDTO.isBeacon!,
                                  fontSize: 25,
                                  onChanged: (value) {
                                    setState(() {
                                      sectionDTO.isBeacon = value;
                                      save(false, appContext);
                                    });
                                  },
                                ),
                                if(sectionDTO.isBeacon!)
                                  NumberInputContainer(
                                    label: "Identifiant Beacon :",
                                    initialValue: sectionDTO.beaconId != null ? sectionDTO.beaconId! : 0,
                                    isSmall: true,
                                    onChanged: (value) {
                                      try {
                                        sectionDTO.beaconId = int.parse(value);
                                      } catch (e) {
                                        print('BeaconId not a number');
                                        showNotification(Colors.orange, kWhite, 'Cela doit être un chiffre', context, null);
                                      }
                                    },
                                  ),
                              ],
                            ),
                          Column(
                            mainAxisAlignment: MainAxisAlignment.spaceAround,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              SizedBox(
                                height: 100,
                                child: StringInputContainer(
                                  label: "Identifiant :",
                                  initialValue: sectionDTO.label,
                                  onChanged: (String value) {
                                    sectionDTO.label = value;
                                  },
                                ),
                              ),
                              MultiStringInputContainer(
                                label: "Titre affiché:",
                                modalLabel: "Titre",
                                color: kPrimaryColor,
                                initialValue: sectionDTO.title!,
                                onGetResult: (value) {
                                  if (sectionDTO.title! != value) {
                                    sectionDTO.title = value;
                                    save(true, appContext);
                                  }
                                },
                                maxLines: 1,
                                isHTML: true,
                                isTitle: true,
                              ),
                              if(!(appContext.getContext() as ManagerAppContext).selectedConfiguration!.isMobile!)
                                MultiStringInputContainer(
                                  label: "Description affichée:",
                                  modalLabel: "Description",
                                  color: kPrimaryColor,
                                  isHTML: true,
                                  initialValue: sectionDTO.description!,
                                  isMandatory: false,
                                  onGetResult: (value) {
                                    if (sectionDTO.description != value) {
                                      sectionDTO.description = value!;
                                      save(true, appContext);
                                    }
                                  },
                                  maxLines: 2,
                                  isTitle: true,
                                ),
                            ],
                          ),
                          Column(
                            mainAxisAlignment: MainAxisAlignment.start,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              ResourceInputContainer(
                                label: "Image :",
                                initialValue: sectionDTO.imageId,
                                color: kPrimaryColor,
                                onChanged: (ResourceDTO resource) {
                                  if(resource.id == null) {
                                    sectionDTO.imageId = null;
                                    sectionDTO.imageSource = null;
                                  } else {
                                    sectionDTO.imageId = resource.id;
                                    sectionDTO.imageSource = resource.url;
                                  }
                                },
                              ),
                            ],
                          )
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),// FIELDS SECTION
          Container(
            //width: size.width * 0.8,
            height: size.height * 0.5,
            child: Padding(
              padding: const EdgeInsets.all(10.0),
              child: getSpecificData(rawSectionDTO, appContext),
            ),
            decoration: BoxDecoration(
                //color: Colors.lightGreen,
                borderRadius: BorderRadius.circular(30),
                border: Border.all(width: 1.5, color: kSecond)
            ),
          ),
        ],
      ),
    );
  }

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

  Future<void> cancel(AppContext appContext) async {
    ManagerAppContext managerAppContext = appContext.getContext();
    Object? rawData = await (appContext.getContext() as ManagerAppContext).clientAPI!.sectionApi!.sectionGetDetail(sectionDTO.id!);
    var nullableSection = SectionDTO.fromJson(rawData);
    if(nullableSection != null)
    {
      managerAppContext.selectedSection = nullableSection!;
      appContext.setContext(managerAppContext);
    }
  }

  Future<void> delete(AppContext appContext) async {
    showConfirmationDialog(
        "Êtes-vous sûr de vouloir supprimer cette section ?",
            () {},
            () async {
          ManagerAppContext managerAppContext = appContext.getContext();
          await managerAppContext.clientAPI!.sectionApi!.sectionDelete(sectionDTO.id!);
          managerAppContext.selectedSection = null;
          appContext.setContext(managerAppContext);
        },
        context
    );
  }

  Future<void> save(bool isTraduction, AppContext appContext) async {
    SectionDTO? section = await (appContext.getContext() as ManagerAppContext).clientAPI!.sectionApi!.sectionUpdate(sectionDetailDTO);
    ManagerAppContext managerAppContext = appContext.getContext();
    managerAppContext.selectedSection = section;
    appContext.setContext(managerAppContext);

    if (isTraduction) {
      showNotification(kSuccess, kWhite, 'Les traductions de la section ont été sauvegardées avec succès', context, null);
    } else {
      showNotification(kSuccess, kWhite, 'La section a été sauvegardée avec succès', context, null);
    }
  }

  getSpecificData(Object? rawSectionData, AppContext appContext) {
    switch(sectionDTO.type) {
      case SectionType.Map:
        MapDTO mapDTO = MapDTO.fromJson(rawSectionData)!;
        sectionDetailDTO = mapDTO;
        return MapConfig(
          initialValue: mapDTO,
          onChanged: (MapDTO changedMap) {
            sectionDetailDTO = changedMap;
          },
        );
      case SectionType.Slider:
        SliderDTO sliderDTO = SliderDTO.fromJson(rawSectionData)!;
        sectionDetailDTO = sliderDTO;
        return SliderConfig(
          initialValue: sliderDTO,
          onChanged: (String data) {
            // TODO DO something
            /*sectionDTO.data = data;
            save(false, sectionDTO, appContext);*/
          },
        );
      case SectionType.Video:
      case SectionType.Web:
        WebDTO webDTO = WebDTO.fromJson(rawSectionData)!;
        sectionDetailDTO = webDTO;
        return WebOrVideoConfig(
          label: sectionDTO.type == SectionType.Video ? "Url de la vidéo:": "Url du site web:",
          initialValue: webDTO,
          onChanged: (String data) {
            // TODO DO something
            //sectionDTO.data = data;
          },
        );
      case SectionType.Menu:
        MenuDTO menuDTO = MenuDTO.fromJson(rawSectionData)!;
        sectionDetailDTO = menuDTO;
        return MenuConfig(
          initialValue: menuDTO,
          onChanged: (String data) {
            //sectionDTO.data = data;
          },
        );
      case SectionType.Quiz:
        QuizDTO quizDTO = QuizDTO.fromJson(rawSectionData)!;
        sectionDetailDTO = quizDTO;
        return QuizzConfig(
          initialValue: quizDTO,
          onChanged: (String data) {
            //sectionDTO.data = data;
          },
        );
      case SectionType.Article:
        ArticleDTO articleDTO = ArticleDTO.fromJson(rawSectionData)!;
        sectionDetailDTO = articleDTO;
        return ArticleConfig(
          initialValue: articleDTO,
          onChanged: (ArticleDTO changedArticle)
          {
            sectionDetailDTO = changedArticle;
          },
        );
      case SectionType.Pdf:
        PdfDTO pdfDTO = PdfDTO.fromJson(rawSectionData)!;
        sectionDetailDTO = pdfDTO;
        return PDFConfig(
          initialValue: pdfDTO,
          onChanged: (String data) {
            //sectionDTO.data = data;
            //save(false, sectionDTO, appContext);
          },
        );
      case SectionType.Puzzle:
        PuzzleDTO puzzleDTO = PuzzleDTO.fromJson(rawSectionData)!;
        sectionDetailDTO = puzzleDTO;
        return PuzzleConfig(
          initialValue: puzzleDTO,
          onChanged: (String data) {
            //sectionDTO.data = data;
          },
        );
      case SectionType.Agenda:
        AgendaDTO agendaDTO = AgendaDTO.fromJson(rawSectionData)!;
        sectionDetailDTO = agendaDTO;
        return AgendaConfig(
          initialValue: agendaDTO,
          onChanged: (String data) {
            /*sectionDTO.data = data;
            save(false, sectionDTO, appContext);*/
          },
        );
      case SectionType.Weather:
        WeatherDTO weatherDTO = WeatherDTO.fromJson(rawSectionData)!;
        sectionDetailDTO = weatherDTO;
        return WeatherConfig(
          initialValue: weatherDTO,
          onChanged: (String data) {
            //sectionDTO.data = data;
            //save(false, sectionDTO, appContext);
          },
        );
    }
  }
}

Future<Object?> getSection(String sectionId, Client client) async {
  try{
    Object? section = await client.sectionApi!.sectionGetDetail(sectionId);
    return section;

  } catch(e) {
    print(e);
    return null;
  }
}

Future<Uint8List?> _captureAndSharePng(GlobalKey globalKey, String sectionId) async {
  try {
    RenderRepaintBoundary ? boundary = globalKey.currentContext!.findRenderObject()! as RenderRepaintBoundary;
    var image = await boundary.toImage();
    ByteData? byteData = await image.toByteData(format: ImageByteFormat.png);
    Uint8List pngBytes = byteData!.buffer.asUint8List();
    final base64data = base64.encode(pngBytes);
    final a = html.AnchorElement(href: 'data:image/jpeg;base64,$base64data');
    a.download = '$sectionId.jpg';
    a.click();

    return pngBytes;

  } catch(e) {
    print(e.toString());
    return null;
  }
}

Future<void> readAndWriteFiles(Uint8List? image) async {
  await Pasteboard.writeImage(image);

  final files = await Pasteboard.files();
  print(files);
}