import 'dart:async';
import 'dart:collection';
import 'package:aitrainer_app/bloc/development_diagram/development_diagram_bloc.dart';
import 'package:aitrainer_app/bloc/menu/menu_bloc.dart';
import 'package:aitrainer_app/util/enums.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: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:flutter_radar_chart/flutter_radar_chart.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:modal_progress_hud_nsn/modal_progress_hud_nsn.dart';

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

class _MyDevelopmentBodyPage extends State<MyDevelopmentBodyPage> with Trans, Common {
  bool isStart = false;
  late BodyDevelopmentBloc bloc;

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

  @override
  Widget build(BuildContext context) {
    final MenuBloc menuBloc = BlocProvider.of<MenuBloc>(context);
    LinkedHashMap arguments = ModalRoute.of(context)!.settings.arguments as LinkedHashMap;
    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.jpg')
                  : AssetImage('asset/image/WT_menu_dark.jpg'),
              fit: BoxFit.cover,
              alignment: Alignment.center,
            ),
          ),
          child: BlocProvider(
              create: (context) => BodyDevelopmentBloc(workoutTreeRepository: menuBloc.menuTreeRepository),
              child: BlocConsumer<BodyDevelopmentBloc, BodyDevelopmentState>(
                listener: (context, state) {
                  if (state is BodyDevelopmentError) {
                    ScaffoldMessenger.of(context)
                        .showSnackBar(SnackBar(backgroundColor: Colors.orange, content: Text(state.message, style: TextStyle(color: Colors.white))));
                  }
                },
                builder: (context, state) {
                  final bloc = BlocProvider.of<BodyDevelopmentBloc>(context);
                  return ModalProgressHUD(
                    child: developmentWidget(customerId, bloc),
                    inAsyncCall: state is BodyDevelopmentLoading,
                    opacity: 0.5,
                    color: Colors.black54,
                    progressIndicator: CircularProgressIndicator(),
                  );
                },
              ))),
      bottomNavigationBar: BottomNavigator(bottomNavIndex: 1),
    );
  }

  Widget getFilterData(BodyDevelopmentBloc bloc) {
    return Container(
      color: Colors.transparent,
      // padding: EdgeInsets.all(5),
      child: Wrap(
        direction: Axis.horizontal,
        spacing: 10,
        runSpacing: 5,
        children: [
          ChoiceChip(
            avatar: Icon(
              Icons.bubble_chart,
            ),
            label: Text(t('Sum Of Mass')),
            labelStyle: TextStyle(fontSize: 9, color: Colors.black),
            selectedColor: Colors.lightBlueAccent,
            selected: bloc.group == DiagramGroup.sumMass,
            onSelected: (value) => {bloc.add(BodyDevelopmentChangeGroup(group: DiagramGroup.sumMass))},
          ),
          ChoiceChip(
            avatar: Icon(Icons.accessibility_new),
            label: Text(t('One Rep Max')),
            labelStyle: TextStyle(fontSize: 9, color: Colors.black),
            selectedColor: Colors.lightBlueAccent,
            selected: bloc.group == DiagramGroup.oneRepMax,
            onSelected: (value) => {bloc.add(BodyDevelopmentChangeGroup(group: DiagramGroup.oneRepMax))},
          ),
          ChoiceChip(
            avatar: Icon(Icons.perm_device_information),
            label: Text(t('Percent')),
            labelStyle: TextStyle(fontSize: 9, color: Colors.black),
            selectedColor: Colors.lightBlueAccent,
            selected: bloc.group == DiagramGroup.percent,
            onSelected: (value) => {bloc.add(BodyDevelopmentChangeGroup(group: DiagramGroup.percent))},
          ),
        ],
      ),
    );
  }

  Widget getGroupDate(BodyDevelopmentBloc bloc) {
    return Container(
      color: Colors.transparent,
      //padding: EdgeInsets.all(5),
      child: Wrap(
        direction: Axis.horizontal,
        spacing: 10,
        runSpacing: 5,
        children: [
          ChoiceChip(
            labelPadding: EdgeInsets.only(right: 5),
            avatar: Icon(Icons.timer),
            label: Text(t('L3M')),
            labelStyle: TextStyle(fontSize: 9, color: Colors.black),
            disabledColor: Colors.black26,
            selectedColor: Colors.greenAccent,
            selected: bloc.filter == DiagramDateFilterGroup.l3m,
            onSelected: (value) => {bloc.add(BodyDevelopmentChangeDate(filter: DiagramDateFilterGroup.l3m))},
          ),
          ChoiceChip(
            labelPadding: EdgeInsets.only(right: 5),
            avatar: Icon(Icons.timer),
            label: Text(t('FM-LM')),
            labelStyle: TextStyle(fontSize: 9, color: Colors.black),
            selectedColor: Colors.greenAccent,
            disabledColor: Colors.white12,
            selected: bloc.filter == DiagramDateFilterGroup.fm_lm,
            onSelected: (value) => {bloc.add(BodyDevelopmentChangeDate(filter: DiagramDateFilterGroup.fm_lm))},
          ),
          ChoiceChip(
            labelPadding: EdgeInsets.only(right: 5),
            avatar: Icon(Icons.timer),
            label: Text(t('L3T')),
            labelStyle: TextStyle(fontSize: 9, color: Colors.black),
            selectedColor: Colors.greenAccent,
            disabledColor: Colors.black26,
            selected: bloc.filter == DiagramDateFilterGroup.l3t,
            onSelected: (value) => {bloc.add(BodyDevelopmentChangeDate(filter: DiagramDateFilterGroup.l3t))},
          ),
          ChoiceChip(
            labelPadding: EdgeInsets.only(right: 5),
            avatar: Icon(Icons.timer),
            label: Text(t('Yearly')),
            labelStyle: TextStyle(fontSize: 9, color: Colors.black),
            selectedColor: Colors.greenAccent,
            disabledColor: Colors.white70,
            selected: bloc.filter == DiagramDateFilterGroup.yearly,
            onSelected: (value) => {bloc.add(BodyDevelopmentChangeDate(filter: DiagramDateFilterGroup.yearly))},
          ),
        ],
      ),
    );
  }

  Widget getLegend(BodyDevelopmentBloc bloc) {
    return Wrap(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Container(
              width: 100,
              height: 6,
              color: Colors.green,
            ),
            SizedBox(
              width: 10,
            ),
            Text(t(bloc.legends[0]), style: GoogleFonts.inter(fontSize: 14)),
          ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Container(
              width: 100,
              height: 6,
              color: Colors.blue,
            ),
            SizedBox(
              width: 10,
            ),
            Text(t(bloc.legends[1]), style: GoogleFonts.inter(fontSize: 14)),
          ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Container(
              width: 100,
              height: 6,
              color: Colors.red,
            ),
            SizedBox(
              width: 10,
            ),
            Text(t(bloc.legends[2]), style: GoogleFonts.inter(fontSize: 14)),
          ],
        )
      ],
    );
  }

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

  Widget exerciseWidget(int customerId, BodyDevelopmentBloc bloc) {
    List<String> radarFeatures = [
      t(MuscleGroup.chest.toText()),
      t(MuscleGroup.biceps.toText()),
      t(MuscleGroup.triceps.toText()),
      t(MuscleGroup.back.toText()),
      t(MuscleGroup.shoulders.toText()),
      t(MuscleGroup.core.toText()),
      t(MuscleGroup.thigh.toText()),
      t(MuscleGroup.calf.toText())
    ];
    return RadarChart.light(ticks: bloc.radarTicks, features: 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),
                ),
              ],
            )));
  }
}