import 'package:aitrainer_app/bloc/exercise_new/exercise_new_bloc.dart';
import 'package:aitrainer_app/library/custom_icon_icons.dart';
import 'package:aitrainer_app/model/property.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:google_fonts/google_fonts.dart';
import 'app_bar.dart';
import 'input_dialog_widget.dart';

// ignore: must_be_immutable
class SizeWidget extends StatefulWidget {
  final ExerciseNewBloc exerciseBloc;

  SizeWidget({this.exerciseBloc});

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

class _SizeState extends State<SizeWidget> with Trans {
  @override
  Widget build(BuildContext context) {
    setContext(context);
    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.png'),
                  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(
                          children: getSizeFigure(),
                        )
                      ]))),
            )));
  }

  List<Widget> getSizeFigure() {
    //print("w " + MediaQuery.of(context).size.width.toString() + "h " + MediaQuery.of(context).size.height.toString());
    List<Widget> list = List();
    list.add(SizedBox(
      width: MediaQuery.of(context).size.width * .80,
      height: MediaQuery.of(context).size.height * .80,
    ));
    list.add(
      Positioned(
          top: 20,
          left: 160,
          child: Stack(
            alignment: Alignment.topLeft,
            children: [
              SizedBox(height: 80, width: 100),
              Text(t("Your Sizes"),
                  style: GoogleFonts.archivoBlack(
                    shadows: <Shadow>[
                      Shadow(
                        offset: Offset(5.0, 5.0),
                        blurRadius: 3.0,
                        color: Colors.black54,
                      ),
                    ],
                    fontSize: 22,
                    color: Colors.orange[500],
                  )),
              Positioned(
                  top: 30,
                  left: 60,
                  child: IconButton(
                      padding: EdgeInsets.zero,
                      icon: Icon(Icons.save),
                      iconSize: 40,
                      hoverColor: Colors.blueAccent,
                      color: widget.exerciseBloc.changedSizes ? Colors.orange[300] : Colors.black54,
                      onPressed: () => {print("Save"), widget.exerciseBloc.add(ExerciseNewSaveWeight())}))
            ],
          )),
    );
    list.add(widget.exerciseBloc.customerRepository.sex == "Man"
        ? Image.asset(
            "asset/image/man_sizes.png",
            height: MediaQuery.of(context).size.height * .80,
          )
        : Image.asset(
            "asset/image/woman_sizes.png",
            height: MediaQuery.of(context).size.height * .80,
          ));

    list.addAll(getSizeElements());
    return list;
  }

  List<Widget> getSizeElements() {
    List<Widget> list = List();

    widget.exerciseBloc.manSizes.forEach((element) {
      list.add(
        Positioned(
            top: element.top.toDouble(),
            left: element.left.toDouble(),
            child: element.value != 0
                ? IconButton(
                    icon: Icon(CustomIcon.ok_circled),
                    padding: EdgeInsets.zero,
                    color: Colors.green[200],
                    onPressed: () => onPressed(element),
                  )
                : IconButton(
                    icon: Icon(CustomIcon.question),
                    padding: EdgeInsets.zero,
                    color: Colors.red[800],
                    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));
              },
            ));
  }
}