import 'package:aitrainer_app/bloc/development_sizes/development_sizes_bloc.dart';
import 'package:aitrainer_app/model/property.dart';
import 'package:aitrainer_app/repository/customer_repository.dart';
import 'package:aitrainer_app/util/trans.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.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';
import '../widgets/app_bar.dart';
import '../widgets/input_dialog_widget.dart';

class SizesDevelopmentPage extends StatefulWidget {
  const SizesDevelopmentPage();

  @override
  _SizeState createState() => _SizeState();
}

class _SizeState extends State<SizesDevelopmentPage> with Trans {
  @override
  Widget build(BuildContext context) {
    setContext(context);
    return BlocProvider(
      create: (context) => DevelopmentSizesBloc(customerRepository: CustomerRepository())..add(DevelopmentSizesLoad()),
      child: BlocConsumer<DevelopmentSizesBloc, DevelopmentSizesState>(listener: (context, state) {
        if (state is DevelopmentSizesError) {
          ScaffoldMessenger.of(context).showSnackBar(
              (SnackBar(backgroundColor: Colors.orange, content: Text(state.message, style: TextStyle(color: Colors.white)))));
        }
      }, builder: (context, state) {
        final bloc = BlocProvider.of<DevelopmentSizesBloc>(context);
        return ModalProgressHUD(
          child: getForm(bloc),
          inAsyncCall: state is DevelopmentSizesLoad,
          opacity: 0.5,
          color: Colors.black54,
          progressIndicator: CircularProgressIndicator(),
        );
      }),
    );
  }

  Widget getForm(DevelopmentSizesBloc bloc) {
    return Form(
        child: Scaffold(
            resizeToAvoidBottomInset: true,
            appBar: AppBarNav(depth: 1),
            body: Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('asset/image/WT_black_background.jpg'),
                  fit: BoxFit.fill,
                  alignment: Alignment.center,
                ),
              ),
              child: SafeArea(
                  child: Container(
                      padding: EdgeInsets.only(top: 10),
                      child: Column(crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: [
                        Stack(
                          alignment: Alignment.center,
                          children: getSizeFigure(bloc),
                        )
                      ]))),
            )));
  }

  List<Widget> getSizeFigure(DevelopmentSizesBloc bloc) {
    double mediaWidth = MediaQuery.of(context).size.width * .8;
    double mediaHeight = MediaQuery.of(context).size.height * .8;

    bloc.customerRepository.setMediaDimensions(mediaWidth, mediaHeight);
    List<Widget> list = [];

    list.add(
      bloc.isMan
          ? Image.asset(
              "asset/image/man_sizes.png",
              height: mediaHeight,
              width: mediaWidth,
            )
          : Image.asset(
              "asset/image/woman_sizes.png",
              height: mediaHeight,
              width: mediaWidth,
            ),
    );
    list.add(Positioned(
      top: bloc.customerRepository.getWeightCoordinate(bloc.isMan, isTop: true)!.toDouble(),
      left: bloc.customerRepository.getWeightCoordinate(bloc.isMan, isTop: false, isLeft: true)!.toDouble() - 45,
      child: GestureDetector(
          //onTap: () => onPressed(bloc.customerRepository.getPropertyByName("Weight")),
          child: Image.asset(
        "asset/image/merleg.png",
        height: 120,
        width: 120,
        color: Colors.blue,
      )),
    ));

    list.addAll(getSizeElements(bloc));
    list.add(
      Positioned(
          top: mediaHeight * .07,
          left: bloc.isMan ? mediaWidth * .62 : mediaWidth * .65,
          child: Stack(
            alignment: Alignment.topLeft,
            children: [
              SizedBox(height: 80, width: 100),
              Text(t("Your Size Diagrams"),
                  maxLines: 2,
                  style: GoogleFonts.archivoBlack(
                    shadows: <Shadow>[
                      Shadow(
                        offset: Offset(5.0, 5.0),
                        blurRadius: 3.0,
                        color: Colors.black54,
                      ),
                    ],
                    fontSize: 20,
                    color: Colors.orange[500],
                  )),
            ],
          )),
    );

    return list;
  }

  List<Widget> getSizeElements(DevelopmentSizesBloc bloc) {
    List<Widget> list = [];

    bloc.customerRepository.manSizes.forEach((element) {
      list.add(
        Positioned(
            top: element.top!.toDouble(),
            left: element.left!.toDouble(),
            child: element.value != 0
                ? Container(
                    width: 20,
                    height: 20,
                    decoration: BoxDecoration(
                      color: bloc.isMan ? Colors.green[800] : Color(0xFFEA776C),
                      borderRadius: BorderRadius.all(
                        Radius.circular(20),
                      ),
                    ),
                    padding: EdgeInsets.zero,
                    child: IconButton(
                      icon: Icon(Icons.trending_up, color: Colors.green),
                      padding: EdgeInsets.zero,
                      color: Colors.red[800],
                      splashColor: Colors.amber,
                      onPressed: () => onPressed(element),
                    ))
                : Container(
                    width: 23,
                    height: 23,
                    padding: EdgeInsets.zero,
                    decoration: BoxDecoration(
                      color: bloc.isMan ? Colors.white10 : Color(0xFFEA776C),
                      borderRadius: BorderRadius.all(
                        Radius.circular(23),
                      ),
                    ),
                    child: IconButton(
                      icon: Icon(Icons.trending_up, color: Colors.red),
                      padding: EdgeInsets.zero,
                      color: Colors.red[800],
                      splashColor: Colors.amber,
                      onPressed: () => onPressed(element),
                    ))),
      );
    });

    return list;
  }

  void onPressed(Property element) {
    print(element.propertyName);
    showDialog(
        context: context,
        builder: (context) => InputDialog(
              title: t("Size Of Your"),
              subtitle: element.propertyNameTranslation,
              initialValue: element.value!,
              onChanged: (value) {
                //widget.exerciseBloc.add(ExerciseNewSizeChange(propertyName: element.propertyName, value: value));
              },
            ));
  }
}