import 'package:aitrainer_app/bloc/sales/sales_bloc.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: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) {
                log("Error: " + state.message);
                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) {
    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([
            Divider(),
            Container(
                padding: EdgeInsets.only(left: 65, right: 65),
                child: Text(t("Unleash Your Development Now!"),
                    textAlign: TextAlign.center,
                    maxLines: 4,
                    softWrap: true,
                    style: GoogleFonts.archivoBlack(
                      fontSize: 30,
                      color: Colors.white,
                      shadows: <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,
                        ),
                      ],
                    ))),
            Divider(),
            Container(
                padding: EdgeInsets.only(left: 45, right: 45),
                child: Text(t("Learn about your development, enjoy AI-driven predictions of all of your skills and bodyparts."),
                    textAlign: TextAlign.left,
                    maxLines: 4,
                    softWrap: true,
                    style: GoogleFonts.inter(
                      fontSize: 16,
                      color: Colors.white,
                    ))),
            SizedBox(
              height: 50,
            ),
          ])),
          SliverGrid(
            delegate: SliverChildListDelegate(getButtons(bloc)),
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,
              mainAxisSpacing: 10.0,
              crossAxisSpacing: 10.0,
              childAspectRatio: 0.55,
            ),
          ),
          SliverList(
              delegate: SliverChildListDelegate([
            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),
                )),
          ])),
        ]));
  }

  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;
  }
}