import 'dart:async';
import 'dart:collection';
import 'package:aitrainer_app/library/radar_chart.dart';
import 'package:aitrainer_app/widgets/app_bar.dart';
import 'package:aitrainer_app/widgets/bottom_nav.dart';
import 'package:aitrainer_app/widgets/dialog_premium.dart';
import 'package:flurry/flurry.dart';
import 'package:flutter/scheduler.dart';
import 'package:aitrainer_app/model/cache.dart';
import 'package:aitrainer_app/util/common.dart';
import 'package:aitrainer_app/util/trans.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:aitrainer_app/bloc/body_development/body_development_bloc.dart';
import 'package:modal_progress_hud/modal_progress_hud.dart';

class MyDevelopmentBodyPage extends StatefulWidget {
  @override
  _MyDevelopmentBodyPage createState() => _MyDevelopmentBodyPage();
}

class _MyDevelopmentBodyPage extends State<MyDevelopmentBodyPage> with Trans, Common {
  bool isStart = false;
  // ignore: close_sinks
  BodyDevelopmentBloc bloc;

  @override
  void initState() {
    super.initState();
    Flurry.logEvent("myDevelopmentBody");
    if (!Cache().hasPurchased) {
      Timer(
          Duration(milliseconds: 2000),
          () => {
                showDialog(
                    context: context,
                    barrierDismissible: false,
                    builder: (BuildContext context) {
                      setContext(context);
                      return DialogPremium(
                        unlocked: false,
                        unlockRound: 2,
                        function: "My Whole Body Development",
                        unlockedText: "",
                        onTap: () => {Navigator.of(context).pop(), Navigator.of(context).pop()},
                        onCancel: () => {Navigator.of(context).pop(), Navigator.of(context).pop()},
                      );
                    })
              });
    }

    /// We require the initializers to run after the loading screen is rendered
    SchedulerBinding.instance.addPostFrameCallback((_) {
      BlocProvider.of<BodyDevelopmentBloc>(context).add(BodyDevelopmentLoad());
    });
  }

  @override
  Widget build(BuildContext context) {
    bloc = BlocProvider.of<BodyDevelopmentBloc>(context);
    LinkedHashMap arguments = ModalRoute.of(context).settings.arguments;
    final int customerId = arguments['customerId'];
    setContext(context);

    return Scaffold(
      appBar: AppBarNav(depth: 1),
      body: Container(
          padding: EdgeInsets.all(20),
          decoration: BoxDecoration(
            image: DecorationImage(
              image: customerId == Cache().userLoggedIn.customerId
                  ? AssetImage('asset/image/WT_light_background.png')
                  : AssetImage('asset/image/WT_menu_dark.png'),
              fit: BoxFit.cover,
              alignment: Alignment.center,
            ),
          ),
          child: BlocConsumer<BodyDevelopmentBloc, BodyDevelopmentState>(
            listener: (context, state) {},
            builder: (context, state) {
              if (state is BodyDevelopmentInitial) {
                return Container();
              } else {
                return ModalProgressHUD(
                  child: developmentWidget(customerId),
                  inAsyncCall: state is BodyDevelopmentLoading,
                  opacity: 0.5,
                  color: Colors.black54,
                  progressIndicator: CircularProgressIndicator(),
                );
              }
            },
          )),
      bottomNavigationBar: BottomNavigator(bottomNavIndex: 1),
    );
  }

  Widget developmentWidget(int customerId) {
    return Column(children: [
      explanationWidget(),
      Expanded(
        child: exerciseWidget(customerId),
      ),
    ]);
  }

  Widget exerciseWidget(int customerId) {
    return RadarChart.light(
      ticks: bloc.radarTicks,
      features: bloc.radarFeatures,
      data: bloc.radarData,
    );
  }

  Widget explanationWidget() {
    return Card(
        color: Colors.white60,
        child: Container(
            padding: EdgeInsets.only(left: 10, right: 5, top: 12, bottom: 8),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Row(
                  children: [
                    Icon(
                      Icons.info,
                      color: Colors.orangeAccent,
                    ),
                    Text("  "),
                    Text(
                      t("My Body Development"),
                      style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                    ),
                  ],
                ),
                Divider(
                  color: Colors.transparent,
                ),
                Text(
                  t("You see here your whole body development by muscle groups."),
                  style: TextStyle(fontSize: 12, fontWeight: FontWeight.normal),
                ),
              ],
            )));
  }
}