import 'package:aitrainer_app/bloc/sales/sales_bloc.dart';
import 'package:aitrainer_app/library/button_animations.dart';
import 'package:aitrainer_app/service/logging.dart';
import 'package:aitrainer_app/util/trans.dart';
import 'package:aitrainer_app/widgets/app_bar_min.dart';
import 'package:aitrainer_app/widgets/dialog_common.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:modal_progress_hud_nsn/modal_progress_hud_nsn.dart';

// ignore: must_be_immutable
class SalesPage extends StatelessWidget with Trans, Logging {
  @override
  Widget build(BuildContext context) {
    setContext(context);
    return Scaffold(
        appBar: AppBarMin(
          back: true,
        ),
        body: BlocProvider(
            create: (context) => SalesBloc()..add(SalesLoad()),
            child: BlocConsumer<SalesBloc, SalesState>(listener: (context, state) {
              if (state is SalesError) {
                ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(backgroundColor: Colors.orange, content: Text(t(state.message), style: TextStyle(color: Colors.white))));
              } else if (state is SalesSuccessful) {
                showDialog(
                    context: context,
                    builder: (BuildContext context) {
                      return DialogCommon(
                        title: t("Successful Purchase"),
                        descriptions: t("Now you can use the premium features of WorkoutTest!"),
                        text: "OK",
                        onTap: () => {
                          Navigator.of(context).pop(),
                          Navigator.of(context).pushNamed("home"),
                        },
                        onCancel: () => {
                          Navigator.of(context).pop(),
                          Navigator.of(context).pushNamed("home"),
                        },
                      );
                    });
              }
            }, builder: (context, state) {
              final salesBloc = BlocProvider.of<SalesBloc>(context);
              return ModalProgressHUD(
                child: salesWidget(salesBloc),
                inAsyncCall: state is SalesLoading,
                opacity: 0.5,
                color: Colors.black54,
                progressIndicator: CircularProgressIndicator(),
              );
            })));
  }

  Widget salesWidget(SalesBloc bloc) {
    final salesText = bloc.salesText != null ? bloc.salesText! : "";
    final String html = salesText;

    log("start SalesPageBuild");

    return Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('asset/image/WT_black_background.jpg'),
            fit: BoxFit.cover,
            alignment: Alignment.center,
          ),
        ),
        child: CustomScrollView(scrollDirection: Axis.vertical, slivers: [
          SliverList(
              delegate: SliverChildListDelegate([
            Html(
              data: html,
              //Optional parameters:
              style: {
                "p": Style(
                  color: Colors.white,
                  fontSize: FontSize(16),
                  padding: const EdgeInsets.only(left: 10, right: 8, bottom: 4),
                  textShadow: <Shadow>[
                    Shadow(
                      offset: Offset(3.0, 3.0),
                      blurRadius: 12.0,
                      color: Colors.black54,
                    ),
                    Shadow(
                      offset: Offset(-3.0, 3.0),
                      blurRadius: 6.0,
                      color: Colors.black54,
                    ),
                  ],
                ),
                "strong": Style(
                  color: Colors.orange[600],
                  fontSize: FontSize(16),
                ),
                "h3": Style(
                  color: Colors.orange[600],
                  fontSize: FontSize(16),
                  textAlign: TextAlign.center,
                  padding: const EdgeInsets.all(12),
                ),
                "li": Style(
                  color: Colors.white,
                  fontSize: FontSize(16),
                  padding: const EdgeInsets.only(left: 10, bottom: 10, right: 8),
                  //before: "*",
                  textShadow: <Shadow>[
                    Shadow(
                      offset: Offset(3.0, 3.0),
                      blurRadius: 12.0,
                      color: Colors.black54,
                    ),
                    Shadow(
                      offset: Offset(-3.0, 3.0),
                      blurRadius: 6.0,
                      color: Colors.black54,
                    ),
                  ],
                  //display: Display.LIST_ITEM,
                ),
                "h2": Style(
                  color: Colors.orange[600],
                  fontWeight: FontWeight.bold,
                  fontSize: FontSize(24),
                  textAlign: TextAlign.center,
                  textShadow: <Shadow>[
                    Shadow(
                      offset: Offset(5.0, 5.0),
                      blurRadius: 12.0,
                      color: Colors.black54,
                    ),
                    Shadow(
                      offset: Offset(-3.0, 3.0),
                      blurRadius: 12.0,
                      color: Colors.black54,
                    ),
                  ],
                  //padding: const EdgeInsets.all(4),
                ),
                "h1": Style(
                  color: Colors.orange[400],
                  fontWeight: FontWeight.bold,
                  fontSize: FontSize.larger,
                  alignment: Alignment.center,
                  padding: const EdgeInsets.all(4),
                ),
              },
            ), //    final Color bgrColor = Color(0xffb4f500);
            //final Color bgrColorEnd = Colors.blue;
            Container(
                padding: EdgeInsets.only(left: 55, right: 55),
                child: Text(
                  t("Tap on the button below the reach all premium content!"),
                  textAlign: TextAlign.center,
                  style: GoogleFonts.inter(color: Colors.white, fontSize: 13),
                )),
            Divider(),
            Row(
              children: [0, 1].map((idx) {
                return Expanded(
                  flex: 1,
                  child: Container(
                      margin: EdgeInsets.symmetric(horizontal: 10),
                      child: AnimatedButton(
                        duration: 600,
                        darkShadow: true,
                        blurRadius: 12,
                        animationCurve: Curves.easeIn,
                        height: 180,
                        width: 160,
                        onTap: () => bloc.add(SalesPurchase(productId: bloc.product2Display[idx].productId)),
                        isMultiColor: true,
                        colors: [
                          //Colors.blue,
                          //Color(0xffb4f500),
                          //Color(0xffb4f500),
                          Colors.white,
                          Colors.yellow[50]!,
                          Colors.yellow[300]!,
                        ],
                        child: Html(
                          data: bloc.productText2Display[idx],
                          //Optional parameters:
                          style: {
                            "p": Style(
                              color: Colors.blue,
                              fontSize: FontSize(14),
                              padding: const EdgeInsets.only(left: 5, right: 8, bottom: 5),
                              textAlign: TextAlign.center,
                            ),
                            "strong": Style(
                              color: Colors.red[800],
                              fontWeight: FontWeight.bold,
                              fontSize: FontSize(14),
                            ),
                            "h3": Style(
                              color: Colors.yellow[600],
                              fontSize: FontSize(16),
                              textAlign: TextAlign.center,
                              padding: const EdgeInsets.all(12),
                            ),
                            "li": Style(
                                color: Colors.white,
                                fontSize: FontSize(14),
                                padding: const EdgeInsets.only(left: 5, bottom: 10, right: 5),
                                //before: "*",
                                display: Display.LIST_ITEM),
                            "h2": Style(
                              color: Colors.blue[600],
                              fontWeight: FontWeight.bold,
                              fontSize: FontSize(16),
                              textAlign: TextAlign.center,
                            ),
                            "h1": Style(
                              color: Colors.blue[400],
                              fontWeight: FontWeight.bold,
                              fontSize: FontSize.larger,
                              alignment: Alignment.center,
                              padding: const EdgeInsets.all(4),
                            ),
                          },
                        ), //    final Color bgr
                      )),
                );
              }).toList(),
            ),

            getTrialDescription(bloc),
            Html(
              data: bloc.premiumFunctions,
              //Optional parameters:
              style: {
                "p": Style(
                  color: Colors.white,
                  fontSize: FontSize(14),
                  padding: const EdgeInsets.only(left: 10, right: 8, bottom: 4),
                ),
                "strong": Style(
                  color: Colors.orange[600],
                  fontSize: FontSize(14),
                  textShadow: <Shadow>[
                    Shadow(
                      offset: Offset(2.0, 2.0),
                      blurRadius: 4.0,
                      color: Colors.black54,
                    ),
                  ],
                ),
                "li": Style(
                  color: Colors.white,
                  fontSize: FontSize(14),
                  padding: const EdgeInsets.only(left: 10, bottom: 3, right: 10),
                ),
                "h2": Style(
                  color: Colors.yellow[600],
                  fontWeight: FontWeight.bold,
                  fontSize: FontSize(16),
                  textAlign: TextAlign.center,
                  textShadow: <Shadow>[
                    Shadow(
                      offset: Offset(5.0, 5.0),
                      blurRadius: 12.0,
                      color: Colors.black54,
                    ),
                    Shadow(
                      offset: Offset(-3.0, 3.0),
                      blurRadius: 12.0,
                      color: Colors.black54,
                    ),
                  ],
                  //padding: const EdgeInsets.all(4),
                ),
              },
            ),

            SizedBox(
              height: 30,
            ),
            Container(
                padding: EdgeInsets.only(left: 55, right: 55),
                child: Text(
                  t("Subscription Conditions"),
                  style: GoogleFonts.inter(fontSize: 14, fontWeight: FontWeight.bold, color: Colors.white),
                )),
            Divider(),
            Container(
                padding: EdgeInsets.only(left: 55, right: 55),
                child: Text(
                  t("Payment will be charged to your account. Subscription automatically renews unless auto-renew is turned off at least 24 hours before the end of the current period"),
                  style: GoogleFonts.inter(fontSize: 12, color: Colors.white),
                )),
            Divider(),
          ])),
        ]));
  }

  Widget getTrialDescription(SalesBloc bloc) {
    return Container(
        padding: EdgeInsets.only(left: 55, right: 55),
        child: Html(
          data: bloc.trial,
          //Optional parameters:
          style: {
            "p": Style(
              color: Colors.white,
              fontSize: FontSize(13),
              padding: const EdgeInsets.all(4),
              textAlign: TextAlign.center,
              textShadow: [
                Shadow(
                  offset: Offset(2.0, 2.0),
                  blurRadius: 6.0,
                  color: Colors.black54,
                )
              ],
            ),
            "strong": Style(
              color: Colors.orange[600],
              fontSize: FontSize(13),
            ),
            "h2": Style(
              color: Colors.orange[600],
              fontWeight: FontWeight.bold,
              fontSize: FontSize(18),
              textAlign: TextAlign.center,
              textShadow: <Shadow>[
                Shadow(
                  offset: Offset(5.0, 5.0),
                  blurRadius: 12.0,
                  color: Colors.black54,
                ),
                Shadow(
                  offset: Offset(-3.0, 3.0),
                  blurRadius: 12.0,
                  color: Colors.black54,
                ),
              ],
              //padding: const EdgeInsets.all(4),
            ),
          },
        ));
  }
}