import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:manager_api/api.dart';
import 'package:mymuseum_visitapp/Components/CustomAppBar.dart';
import 'package:mymuseum_visitapp/Components/Loading.dart';
import 'package:mymuseum_visitapp/Components/ScannerBouton.dart';
import 'package:mymuseum_visitapp/Components/SliderImages.dart';
import 'package:mymuseum_visitapp/Helpers/DatabaseHelper.dart';
import 'package:mymuseum_visitapp/Helpers/networkCheck.dart';
import 'package:mymuseum_visitapp/Helpers/translationHelper.dart';
import 'package:mymuseum_visitapp/Models/resourceModel.dart';
import 'package:mymuseum_visitapp/app_context.dart';
import 'package:mymuseum_visitapp/client.dart';
import 'package:mymuseum_visitapp/constants.dart';
import 'package:provider/provider.dart';

class ArticlePage extends StatefulWidget {
  const ArticlePage({Key? key, required this.articleId}) : super(key: key);

  final String articleId;

  @override
  State<ArticlePage> createState() => _ArticlePageState();
}

class _ArticlePageState extends State<ArticlePage> {
  SectionDTO? sectionDTO;
  ArticleDTO? articleDTO;
  List<ResourceModel?> resourcesModel = <ResourceModel?>[];
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    final appContext = Provider.of<AppContext>(context);
    Size size = MediaQuery.of(context).size;
    final notchInset = MediaQuery.of(context).padding;
    return Scaffold(
      key: _scaffoldKey,
      appBar: CustomAppBar(
        title: sectionDTO != null ? TranslationHelper.get(sectionDTO!.title, appContext) : "",
        isHomeButton: false,
      ),
      body: FutureBuilder(
        future: getArticle(appContext.clientAPI, widget.articleId),
        builder: (context, AsyncSnapshot<dynamic> snapshot) {
          if(articleDTO != null && sectionDTO != null) {
            return Column(
              children: [
                /*if(mainResource != null)
                  Container(
                    height: size.height * 0.1,
                    width: size.width,
                    child: Stack(
                      children: [
                        Positioned(
                          bottom: 0,
                          left: 0,
                          child: Row(
                            children: [
                              Container(
                                height: size.height*0.08,
                                width: size.width,
                                //color: Colors.blueAccent,
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                  children: [
                                    Column(
                                      crossAxisAlignment: CrossAxisAlignment.start,
                                      children: [
                                        Padding(
                                          padding: const EdgeInsets.only(left: 10),
                                          child: Text(
                                              TranslationHelper.get(sectionDTO!.title, appContext),
                                              style: const TextStyle(fontSize: kArticleTitleSize),
                                              textAlign: TextAlign.left
                                          ),
                                        ),
                                        Padding(
                                          padding: const EdgeInsets.only(left: 10.0, top: 10.0),
                                          child: Text(
                                              TranslationHelper.get(sectionDTO!.description, appContext),
                                              style: const TextStyle(fontSize: kArticleDescriptionSize),
                                              textAlign: TextAlign.left
                                          ),
                                        )
                                      ],
                                    ),
                                    if(articleDTO!.audioId != null)
                                      InkWell(
                                        onTap: () {
                                          print("play push");
                                        },
                                        child: const Center(
                                            child: Padding(
                                              padding: EdgeInsets.only(right: 20.0),
                                              child: Icon(Icons.play_arrow, size: 35, color: kMainColor),
                                            ),
                                        ),
                                      )
                                  ],
                                ),
                              )
                            ],
                          ),
                        ),
                        /*Positioned(
                            top: notchInset.top,
                            left: 0,
                            child: InkWell(
                                onTap: () {
                                  setState(() {
                                    Navigator.of(context).pop();
                                  });
                                },
                                child: Text("Coucou")))*/
                      ],
                    ),
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        opacity: 0.45,
                        image: Image.memory(base64Decode(mainResource!.data!)).image,
                        fit: BoxFit.cover,
                      ),
                      //color: kMainColor
                    ),
                  ),
                */


                if(articleDTO!.isContentTop!)
                  getContent(size, appContext),
                if(articleDTO!.isContentTop! && resourcesModel.isNotEmpty)
                  getImages(size, articleDTO!.isContentTop!),

                if(!articleDTO!.isContentTop! && resourcesModel.isNotEmpty)
                  getImages(size, articleDTO!.isContentTop!),
                if(!articleDTO!.isContentTop!)
                  getContent(size, appContext),

              ],
            );
          } else {
            return const Loading();
          }

        }
      ),
      //floatingActionButton: const ScannerBouton(isReplacement: true),
    );
  }



  Widget getImages(Size size, bool isContentTop) {
    return SizedBox(
        width: size.width,
        height: size.height * 0.3,
        child: Padding(
            padding: isContentTop ? const EdgeInsets.only(left: 8.0, right: 8.0, bottom: 8.0): const EdgeInsets.only(left: 8.0, right: 8.0, top: 8.0),
            child: Container(
                decoration: BoxDecoration(
                  border: Border.all(
                    color: kBlue2,
                    width: 0.5,
                  ),
                  color: Colors.white,
                  shape: BoxShape.rectangle,
                  borderRadius: BorderRadius.circular(5.0),
                    boxShadow: const [kDefaultShadow],
                ),
                child: SliderImagesWidget(resources: resourcesModel, height: size.height * 0.29)
            )
        )
    );
  }

  Widget getContent(Size size, AppContext appContext) {
    return Expanded(
      child: Container(
          width: size.width,
          //height: size.height * 0.65,
          //color: Colors.blueAccent,
          child: Padding(
              padding: const EdgeInsets.only(left: 8.0, right: 8.0, top: 8.0, bottom: 8.0),
              child: Container(
                  decoration: BoxDecoration(
                    border: Border.all(
                      color: kBlue2,
                      width: 0.5,
                    ),
                    color: Colors.white,
                    shape: BoxShape.rectangle,
                    borderRadius: BorderRadius.circular(5.0),
                    boxShadow: const [kDefaultShadow],
                  ),
                  child: SingleChildScrollView(
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text(
                          TranslationHelper.get(articleDTO!.content, appContext),
                          textAlign: TextAlign.left,
                          style: const TextStyle(fontSize: kArticleContentSize)
                      ),
                    ),
                  )
              )
          )
      ),
    );
  }

  Future<ArticleDTO?> getArticle(Client client, String articleId) async {
    try {
      bool isOnline = await hasNetwork();
      if(sectionDTO == null || articleDTO == null) {
        await DatabaseHelper.instance.queryWithId(DatabaseTableType.sections, articleId).then((value) async {
          setState(() {
            sectionDTO = DatabaseHelper.instance.getSectionFromDB(value.first);
            if(sectionDTO!.type == SectionType.Article) {
              articleDTO = ArticleDTO.fromJson(jsonDecode(sectionDTO!.data!));
            }
          });
          if(sectionDTO!.imageId != null) {
            await DatabaseHelper.instance.queryWithId(DatabaseTableType.resources, sectionDTO!.imageId!).then((value) {
              resourcesModel.add(DatabaseHelper.instance.getResourceFromDB(value.first));
            });
          }
          if(articleDTO!.images!.isNotEmpty) {
            for (var image in articleDTO!.images!) {
              await DatabaseHelper.instance.queryWithId(DatabaseTableType.resources, image.resourceId!).then((value) {
                resourcesModel.add(DatabaseHelper.instance.getResourceFromDB(value.first));
              });
            }

            /*if(mainResource == null && resourcesModel.isNotEmpty) {
              mainResource = resourcesModel.first;
            }*/
          }
        });
      } else {
        // TODO ONLINE
        return null; // TODO return local list..
      }
    } catch (e) {
      print(e);
      print("IN CATCH");
      return null;
    }
  }
}