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:aitrainer_app/widgets/sales_button.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: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;

    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: 20, right: 8, bottom: 4),
                ),
                "strong": Style(
                  color: Colors.yellow[600],
                  fontSize: FontSize(16),
                ),
                "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: 20, bottom: 10, right: 8),
                    //before: "*",
                    display: Display.LIST_ITEM),
                "h2": Style(
                  color: Colors.yellow[600],
                  fontWeight: FontWeight.bold,
                  fontSize: FontSize(24),
                  textAlign: TextAlign.center,
                  //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),
                ),
              },
            ), //    final Color bgrColor = Color(0xffb4f500);
            //final Color bgrColorEnd = Colors.blue;
            AnimatedButton(
              child: Html(
                data: bloc.salesButtonText,
                //Optional parameters:
                style: {
                  "p": Style(
                    color: Colors.black,
                    fontSize: FontSize(16),
                    padding: const EdgeInsets.all(4),
                    textAlign: TextAlign.center,
                    textShadow: [
                      Shadow(
                        offset: Offset(2.0, 2.0),
                        blurRadius: 6.0,
                        color: Colors.black54,
                      )
                    ],
                  ),
                  "li": Style(
                    color: Colors.white,
                    fontSize: FontSize(14),
                    padding: const EdgeInsets.only(left: 10, bottom: 10),
                    before: "*",
                  ),
                  "h2": Style(
                    color: Colors.black,
                    fontWeight: FontWeight.bold,
                    fontSize: FontSize.larger,
                    textAlign: TextAlign.center,
                    textShadow: [
                      Shadow(
                        offset: Offset(2.0, 2.0),
                        blurRadius: 12.0,
                        color: Colors.black54,
                      )
                    ],
                    //padding: const EdgeInsets.all(4),
                  ),
                  "h1": Style(
                    color: Colors.yellow[600],
                    fontWeight: FontWeight.bold,
                    fontSize: FontSize.xLarge,
                    alignment: Alignment.center,
                    padding: const EdgeInsets.all(4),
                    textAlign: TextAlign.center,
                    textShadow: [
                      Shadow(
                        offset: Offset(5.0, 5.0),
                        blurRadius: 12.0,
                        color: Colors.black54,
                      )
                    ],
                  ),
                },
              ),
              duration: 600,
              darkShadow: true,
              blurRadius: 12,
              animationCurve: Curves.easeIn,
              height: 120,
              width: 320,
              onTap: () => bloc.add(SalesPurchase(productId: bloc.offeredProduct!.productId)),
              //color: Color(0xffb4f500),
              isMultiColor: true,
              colors: [
                Colors.blue,
                Color(0xffb4f500),
                Color(0xffb4f500),
              ],
            ),

            getTrialDescription(),
            //Divider(),
            AnimatedButton(
              child: Html(
                data: "<p>" + t("View other alternatives") + "</p>",
                //Optional parameters:
                style: {
                  "p": Style(
                    color: Colors.black,
                    fontSize: FontSize(14),
                    padding: const EdgeInsets.all(4),
                    textAlign: TextAlign.center,
                  ),
                },
              ),
              onTap: () => bloc.add(SalesChangeSubscription()),
              width: 320,
              blurRadius: 6,
              isMultiColor: true,
              colors: [
                Colors.white,
                Colors.yellow[300]!,
              ],
            ),

            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(),
            Container(
                padding: EdgeInsets.only(left: 55, right: 55),
                child: Text(
                  t("Account will be charged for renewal within 24 hours prior to the end of the current period"),
                  style: GoogleFonts.inter(fontSize: 12, color: Colors.white),
                )),
          ])),
        ]));
  }

  Widget getTrialDescription() {
    final trialText = t("Try free for 3 days!");
    return Container(
        padding: EdgeInsets.only(left: 55, right: 55),
        child: Html(
          data: "<p>" + trialText + "</p>",
          //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.yellow[600],
              fontSize: FontSize(13),
            ),
          },
        ));
  }

  List<Widget> getButtons(SalesBloc bloc) {
    List<Widget> buttons = [];

    bloc.product2Display.forEach((element) {
      final String title = element.sort == 3 ? t("Montly") : t("Annual");
      final String desc4 = element.sort == 1 ? "" : t("Predictions with Artificial Intelligence");
      String? badge;
      if (element.sort == 2) {
        badge = t("14% discount");
      } else if (element.sort == 1) {
        badge = t("2 months free");
      }
      Widget button = SalesButton(
        title: title,
        price: element.localizedPrice!,
        desc1: t("Development programs"),
        desc2: t("Suggestions based on your actual status"),
        desc3: t("Special customized training plans"),
        desc4: desc4,
        descStyle: GoogleFonts.inter(fontSize: 10, color: Colors.blue[800]),
        badgeText: badge,
        badgeColor: element.sort == 3 ? Colors.transparent : Colors.orange,
        style: GoogleFonts.archivoBlack(fontSize: 14, color: Colors.blue[800]),
        onTap: () => {bloc.add(SalesPurchase(productId: element.productId))},
      );
      buttons.add(button);
    });

    return buttons;
  }
}