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/splash.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';

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

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

  @override
  void initState() {
    super.initState();

    /// 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) {
              if (state is BodyDevelopmentLoading) {
                LoadingDialog();
              }
            },
            builder: (context, state) {
              if ( state is BodyDevelopmentInitial) {
                return Container();
              } else {
                return developmentWidget(customerId);
              }
            },
          )

        ),
        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),
            ),

          ],
        )
      )
    );
  }



}