import 'package:aitrainer_app/bloc/tutorial/tutorial_bloc.dart';
import 'package:aitrainer_app/service/logging.dart';
import 'package:aitrainer_app/util/trans.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:flutter_html/style.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:aitrainer_app/library/super_tooltip.dart';

class TutorialWidget with Trans, Logging {
  static final TutorialWidget _singleton = TutorialWidget._internal();
  SuperTooltip? tooltip;
  TutorialWidget._internal();
  factory TutorialWidget() {
    return _singleton;
  }

  void close() {
    if (tooltip != null && tooltip!.isOpen) {
      tooltip!.close();
    }
  }

  void tip(BuildContext context) {
    setContext(context);
    var renderBox = context.findRenderObject() as RenderBox;
    final overlay = Overlay.of(context)!.context.findRenderObject() as RenderBox?;

    var targetGlobalCenter = renderBox.localToGlobal(renderBox.size.center(Offset.zero), ancestor: overlay);

    final TutorialBloc bloc = BlocProvider.of<TutorialBloc>(context);

    if (tooltip != null && tooltip!.isOpen) {
      tooltip!.rebuild();
    }

    Rect? area;
    if (bloc.action != null) {
      area = bloc.action!.showBubble == true
          ? Rect.fromLTWH(targetGlobalCenter.dx - bloc.action!.bubbleX, targetGlobalCenter.dy - bloc.action!.bubbleY,
              bloc.action!.bubbleWidth.toDouble(), bloc.action!.bubbleHeight.toDouble())
          : null;
    }

    final double mediaSize = MediaQuery.of(context).size.width;

    double fontSize = 14;
    if (mediaSize > 400) {
      fontSize = 15;
    } else if (mediaSize < 375) {
      fontSize = 13;
    }
    tooltip = SuperTooltip(
      top: bloc.top,
      left: bloc.left,
      backgroundColor: Colors.black.withOpacity(0.7),
      popupDirection: bloc.action == null || bloc.action!.direction == "up" ? TooltipDirection.up : TooltipDirection.down,
      maxWidth: 390,
      minWidth: 300,
      minHeight: 100,
      maxHeight: 300,
      borderColor: Colors.orange,
      borderWidth: 1.0,
      minimumOutSidePadding: 20,
      snapsFarAwayVertically: false,
      showCloseButton: ShowCloseButton.inside,
      closeButtonColor: Colors.grey,
      dismissOnTapOutside: false,
      outsideBackgroundColor: Colors.black.withOpacity(0.6),
      hasShadow: true,
      touchThrougArea: area,
      onClose: () => bloc.add(TutorialFinished()),
      custom: true,
      touchThroughAreaShape: ClipAreaShape.oval,
      content: new Material(
          color: Colors.transparent,
          child: Padding(
            padding: const EdgeInsets.only(top: 20.0),
            child: Stack(alignment: Alignment.bottomRight, children: [
              SingleChildScrollView(
                  child: Html(
                data: bloc.actualText! + "<p><br/> </p>",
                //Optional parameters:
                style: {
                  "p": Style(
                    color: Colors.white,
                    fontSize: FontSize(fontSize),
                    padding: const EdgeInsets.all(4),
                  ),
                  "li": Style(
                    color: Colors.white,
                    fontSize: FontSize(fontSize),
                    padding: const EdgeInsets.only(left: 4),
                  ),
                  "h2": Style(
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                    fontSize: FontSize.larger,
                    //padding: const EdgeInsets.all(4),
                  ),
                  "h1": Style(
                    color: Colors.yellow[400],
                    fontWeight: FontWeight.bold,
                    fontSize: FontSize.larger,
                    alignment: Alignment.center,
                    padding: const EdgeInsets.all(4),
                  ),
                },
              )),
              bloc.showCheckText
                  ? bloc.checks.length > 1
                      ? Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            ElevatedButton(
                              style: ElevatedButton.styleFrom(
                                primary: Colors.transparent,
                              ),
                              onPressed: () => {bloc.add(TutorialNext(text: bloc.checks[0]))},
                              child: Text("« " + t(bloc.checks[0]),
                                  style: GoogleFonts.archivoBlack(color: Colors.orange[400]!, fontSize: fontSize)),
                            ),
                            ElevatedButton(
                              style: ElevatedButton.styleFrom(
                                primary: Colors.transparent,
                              ),
                              onPressed: () => {bloc.add(TutorialNext(text: bloc.checks[1]))},
                              child: Text(t(bloc.checks[1]) + " »",
                                  style: GoogleFonts.archivoBlack(color: Colors.orange[400]!, fontSize: fontSize)),
                            ),
                          ],
                        )
                      : ElevatedButton(
                          style: ElevatedButton.styleFrom(
                            primary: Colors.transparent,
                          ),
                          onPressed: () => {
                            //tooltip!.rebuild(context),
                            bloc.add(TutorialNext(text: bloc.checks[0])),
                          },
                          child: Text(t(bloc.checks[0]) + " »",
                              style: GoogleFonts.archivoBlack(color: Colors.orange[400]!, fontSize: fontSize)),
                        )
                  : Offstage(),
            ]),
          )),
    );

    tooltip!.show(context);
  }
}