import 'package:aitrainer_app/util/trans.dart';
import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:flutter_html/style.dart';
import 'package:google_fonts/google_fonts.dart';

// ignore: must_be_immutable
class DialogHTML extends StatefulWidget {
  final String title;
  final String htmlData;
  DialogHTML({Key? key, required this.title, required this.htmlData}) : super(key: key);

  @override
  _DialogPremiumState createState() {
    return _DialogPremiumState();
  }
}

class _DialogPremiumState extends State<DialogHTML> with Trans {
  bool isStart = true;
  @override
  Widget build(BuildContext context) {
    setContext(context);
    return Dialog(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(31),
      ),
      elevation: 0,
      backgroundColor: Colors.transparent,
      child: contentBox(context),
    );
  }

  contentBox(context) {
    return Stack(children: [
      Container(
        padding: EdgeInsets.only(left: 10, top: 24, right: 10, bottom: 30),
        margin: EdgeInsets.only(top: 30),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(24),
          boxShadow: [BoxShadow(color: Colors.black, offset: Offset(0, 10), blurRadius: 10)],
          image: DecorationImage(
            image: AssetImage('asset/image/WT_results_background.jpg'),
            fit: BoxFit.cover,
            alignment: Alignment.center,
          ),
        ),
        child: SingleChildScrollView(
          child: Html(
            data: '<h1>' + widget.title + '</h1>' + widget.htmlData,
            //Optional parameters:
            style: {
              "p": Style(
                color: Colors.white,
                padding: const EdgeInsets.all(4),
              ),
              "li": Style(
                color: Colors.white,
                //padding: const EdgeInsets.all(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),
              ),
            },
          ),
        ),
      ),
      GestureDetector(
          onTap: () {
            Navigator.of(context).pop();
          },
          child: CircleAvatar(
            backgroundColor: Colors.transparent,
            radius: 28,
            child: Text(
              "X",
              style: GoogleFonts.archivoBlack(fontSize: 32, color: Colors.white54),
            ),
          )),
    ]);
  }

  @override
  void dispose() {
    super.dispose();
  }
}