import 'package:aitrainer_app/bloc/customer_change/customer_change_bloc.dart';
import 'package:aitrainer_app/library/custom_icon_icons.dart';

import 'package:aitrainer_app/repository/customer_repository.dart';
import 'package:aitrainer_app/util/trans.dart';
import 'package:aitrainer_app/widgets/app_bar_min.dart';
import 'package:aitrainer_app/widgets/app_bar_progress.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:google_fonts/google_fonts.dart';

import 'package:syncfusion_flutter_gauges/gauges.dart';

// ignore: must_be_immutable
class CustomerHeightPage extends StatefulWidget {
  late _CustomerHeightPageState _state;

  _CustomerHeightPageState createState() {
    _state = _CustomerHeightPageState();
    return _state;
  }
}

class _CustomerHeightPageState extends State<CustomerHeightPage> with Trans {
  String? selected;
  bool fulldata = false;
  late CustomerChangeBloc changeBloc;
  late double cWidth;

  @override
  Widget build(BuildContext context) {
    setContext(context);

    final CustomerRepository customerRepository = ModalRoute.of(context)!.settings.arguments as CustomerRepository;

    PreferredSizeWidget _bar = AppBarMin(
      back: true,
    );
    if (!fulldata) {
      _bar = AppBarProgress(max: 75, min: 60);
    }

    return Scaffold(
      appBar: _bar,
      body: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage('asset/image/WT_plainblack_background.jpg'),
              fit: BoxFit.cover,
              alignment: Alignment.center,
            ),
          ),
          height: double.infinity,
          width: double.infinity,
          child: BlocProvider(
            create: (context) => CustomerChangeBloc(customerRepository: customerRepository),
            child: BlocConsumer<CustomerChangeBloc, CustomerChangeState>(
              listener: (context, state) {
                if (state is CustomerSaveError) {
                  ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(backgroundColor: Colors.orange, content: Text(state.message, style: TextStyle(color: Colors.white))));
                } else if (state is CustomerSaveSuccess) {
                  if (fulldata) {
                    Navigator.of(context).pop();
                  } else {
                    Navigator.of(context).popAndPushNamed("registration", arguments: changeBloc.customerRepository);
                  }
                }
              },
              builder: (context, state) {
                changeBloc = BlocProvider.of<CustomerChangeBloc>(context);
                return getPage();
              },
            ),
          )),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () => changeBloc.add(CustomerSaveHeight()),
        backgroundColor: Colors.orange[600],
        icon: Icon(
          CustomIcon.save,
          color: Colors.white,
          size: 26,
        ),
        label: Text(
          fulldata ? t("Save") : t("Finish"),
          style: GoogleFonts.inter(fontWeight: FontWeight.bold, fontSize: 18, color: Colors.white),
        ),
      ),
    );
  }

  Widget getPage() {
    final double h = 27;
    cWidth = MediaQuery.of(context).size.width * 0.75;
    return SingleChildScrollView(
      scrollDirection: Axis.vertical,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          SizedBox(
            height: h,
          ),
          Wrap(alignment: WrapAlignment.center, children: [
            Text(
              t("What is your height?"),
              textAlign: TextAlign.center,
              maxLines: 2,
              style: GoogleFonts.archivoBlack(
                color: Colors.white,
                fontSize: 30,
                fontWeight: FontWeight.w900,
              ),
            )
          ]),
          SizedBox(
            height: h,
          ),
          getButton(),
        ],
      ),
    );
  }

  Widget getButton() {
    double mediaWidth = MediaQuery.of(context).size.width * .4;
    double mediaHeight = MediaQuery.of(context).size.height * .4;
    return Row(children: [
      changeBloc.customerRepository.customer!.sex == "m"
          ? Image.asset(
              "asset/image/test_picto_m.png",
              height: mediaHeight,
              width: mediaWidth,
            )
          : Image.asset(
              "asset/image/test_picto_w.png",
              height: mediaHeight,
              width: mediaWidth,
            ),
      SfLinearGauge(
          minimum: 140,
          maximum: 220,
          markerPointers: [
            LinearWidgetPointer(
              value: changeBloc.height,
              offset: 55,
              position: LinearElementPosition.inside,
              markerAlignment: LinearMarkerAlignment.center,
              child: Container(
                height: 25,
                width: 55,
                color: Colors.transparent,
                child: Text(changeBloc.height.toString(),
                    style: GoogleFonts.inter(
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                      color: Color(0xffb4f500),
                    )),
              ),
            ),
            LinearShapePointer(
              height: 25,
              width: 55,
              color: Color(0xffb4f500),
              value: changeBloc.height,
              onChanged: (value) => {
                changeBloc.add(CustomerHeightChange(height: value.toInt())),
              },
            ),
          ],
          orientation: LinearGaugeOrientation.vertical,
          majorTickStyle: LinearTickStyle(length: 20, color: Colors.white),
          axisLabelStyle: TextStyle(fontSize: 12.0, color: Colors.white),
          axisTrackStyle:
              LinearAxisTrackStyle(color: Colors.cyan, edgeStyle: LinearEdgeStyle.bothFlat, thickness: 1.0, borderColor: Colors.white))
    ]);
  }
}