import 'package:aitrainer_app/bloc/faq/faq_bloc.dart';
import 'package:aitrainer_app/library/tree_view.dart';
import 'package:aitrainer_app/model/faq.dart';
import 'package:aitrainer_app/util/app_language.dart';
import 'package:aitrainer_app/util/trans.dart';
import 'package:aitrainer_app/widgets/app_bar.dart';
import 'package:aitrainer_app/widgets/treeview_parent_widget.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:modal_progress_hud_nsn/modal_progress_hud_nsn.dart';

// ignore: must_be_immutable
class FaqPage extends StatelessWidget with Trans {
  @override
  Widget build(BuildContext context) {
    setContext(context);

    return BlocProvider(
        create: (context) => FaqBloc(),
        child: BlocConsumer<FaqBloc, FaqState>(listener: (context, state) {
          if (state is FaqError) {
            ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(backgroundColor: Colors.orange, content: Text(state.message, style: TextStyle(color: Colors.white))));
          }
        }, builder: (context, state) {
          final FaqBloc bloc = BlocProvider.of<FaqBloc>(context);
          return ModalProgressHUD(
            child: getFaqs(bloc),
            inAsyncCall: state is FaqLoading,
            opacity: 0.5,
            color: Colors.black54,
            progressIndicator: CircularProgressIndicator(),
          );
        }));
  }

  Widget getFaqs(FaqBloc bloc) {
    return Scaffold(
      appBar: AppBarNav(depth: 1),
      body: Container(
        padding: EdgeInsets.all(20),
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('asset/image/WT_black_background.jpg'),
            fit: BoxFit.cover,
            alignment: Alignment.center,
          ),
        ),
        child: faqWidget(bloc),
      ),
    );
  }

  Widget faqWidget(FaqBloc bloc) {
    return TreeView(
      startExpanded: false,
      children: _getTreeChildren(bloc),
    );
  }

  List<Widget> _getTreeChildren(FaqBloc bloc) {
    List<Widget> listWidget = [];

    Card explanation = Card(
        color: Colors.white60,
        child: Container(
            padding: EdgeInsets.only(left: 10, right: 5, top: 12, bottom: 8),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Row(
                  children: [
                    Icon(
                      Icons.info,
                      color: Colors.orangeAccent,
                    ),
                    Text("  "),
                    Text(
                      t("FAQs"),
                      style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                    ),
                  ],
                ),
                Divider(
                  color: Colors.transparent,
                ),
                Text(
                  t("Here can you find the most frequently asked questions."),
                  style: TextStyle(fontSize: 12, fontWeight: FontWeight.normal),
                ),
              ],
            )));
    listWidget.add(explanation);

    if (bloc.faqs != null) {
      bloc.faqs!.forEach((element) {
        print("Lang: ${AppLanguage().appLocal} faq: ${element.descriptionTranslations['hu']}");
        listWidget.add(Container(
            margin: const EdgeInsets.only(left: 4.0),
            child: TreeViewChild(
              startExpanded: false,
              parent: TreeviewParentWidget(
                text: element.nameTranslations[AppLanguage().appLocal.toString()] != null
                    ? element.nameTranslations[AppLanguage().appLocal.toString()]!
                    : element.name,
                fontSize: 18,
                icon: Icon(Icons.question_answer),
                color: Colors.blue[800],
              ),
              children: _getChildList(bloc, element),
            )));
      });
    }

    return listWidget;
  }

  List<Widget> _getChildList(FaqBloc bloc, Faq faq) {
    List<Widget> list = [];

    list.add(
      Card(
          margin: EdgeInsets.only(left: 10, top: 5),
          color: Colors.white54,
          child: Container(
            padding: const EdgeInsets.only(left: 15, top: 5, right: 5, bottom: 5),
            child: Row(mainAxisAlignment: MainAxisAlignment.start, children: [
              Flexible(
                fit: FlexFit.tight,
                flex: 20,
                child: Html(
                  data: faq.descriptionTranslations[AppLanguage().appLocal.toString()] != null
                      ? faq.descriptionTranslations[AppLanguage().appLocal.toString()]!
                      : faq.description,
                  //Optional parameters:
                  style: {
                    "p": Style(
                      color: Colors.black,
                      padding: const EdgeInsets.all(4),
                    ),
                    "li": Style(
                      color: Colors.white,
                      //padding: const EdgeInsets.all(4),
                    ),
                    "h2": Style(
                      color: Colors.black,
                      fontWeight: FontWeight.bold,
                      fontSize: FontSize.larger,

                      //padding: const EdgeInsets.all(4),
                    ),
                    "h1": Style(
                      color: Colors.black,
                      fontWeight: FontWeight.bold,
                      fontSize: FontSize.larger,
                      alignment: Alignment.center,
                      padding: const EdgeInsets.all(4),
                    ),
                  },
                ),
              ),
            ]),
          )),
    );

    return list;
  }
}