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/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/modal_progress_hud.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);
                Scaffold.of(context).showSnackBar(
                    SnackBar(backgroundColor: Colors.orange, content: Text(state.message, style: TextStyle(color: Colors.white))));
              }
            }, 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 double mediaWidth = MediaQuery.of(context).size.width;
    final double imageWidth = (mediaWidth - 5) / 2;
    return Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('asset/image/WT_black_background.png'),
            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("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("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(
                  "Subscription Conditions",
                  style: GoogleFonts.inter(fontSize: 14, fontWeight: FontWeight.bold, color: Colors.white),
                )),
            Divider(),
            Container(
                padding: EdgeInsets.only(left: 55, right: 55),
                child: Text(
                  "Payment will be charged to your account. Subscription automatically renews unless auto-renew is turned off at least 24 hourse 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(
                  "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 = List();

    bloc.product2Display.forEach((element) {
      final String title = element.sort == 3 ? "Montly" : "Annual";
      final String interval = element.sort == 3 ? " / month" : " / year";
      final String desc4 = element.sort == 1 ? "" : "AI driven predictions";
      String badge;
      if (element.sort == 2) {
        badge = "14% discount";
      } else if (element.sort == 1) {
        badge = "2 months free";
      }
      Widget button = SalesButton(
        title: title,
        price: element.localizedPrice,
        desc1: "Development programs",
        desc2: "Suggestions based on your actual status",
        desc3: "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;
  }
}