import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:trackoffical_app/utils.dart';
import 'package:trackoffical_app/view/game_settings.dart';
import 'package:screen_brightness/screen_brightness.dart';
import '../sport_wear_select_view.dart';
import 'button_punch.dart';
import 'info_view.dart';
import 'widget_ruler2.dart';
import '../../widget/compass2.dart';
import 'utils.dart';
import 'settings_view.dart';
import '../../service/app.dart';
import '../../service/game/game.dart';
import '../../service/game/game_model.dart';
import '../../service/mock.dart';
import '../../styles/color_schemes.g.dart';
import 'in_game_controller.dart';

class InGameNoMapView extends GetView<InGameController> {
  InGameNoMapView({super.key});

  static const _hPadding = 60.0;
  final _model = Get.find<GameModel>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: DefaultTextStyle(
      style: const TextStyle(color: Colors.white),
      child: Stack(
        children: [
          Obx(() => Container(
                decoration: BoxDecoration(
                    color: _model.heartRatePercent.value.round().toHRPColor()),
                width: context.width,
                height: context.height,
              )),
          Obx(() => !controller.isNoMapRulerScaleMode.value
              ? const Ruler2(isScaleMode: false)
              : const SizedBox()),
          Container(
              padding: EdgeInsets.only(
                  top: context.mediaQueryPadding.top,
                  left: _hPadding,
                  right: _hPadding),
              width: context.width,
              child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    const SizedBox(height: 20),
                    _topButtonBar(),
                    _wDuration(),
                    _process(),
                    _topElemHub(),
                    _compass(),
                    _heartRate(),
                    _sports(),
                    _bottomBar(),
                  ])),
          Obx(() => controller.isNoMapRulerScaleMode.value
              ? Ruler2(
                  isScaleMode: true,
                  onReturn: () =>
                      controller.isNoMapRulerScaleMode.value = false,
                  mapScale: controller.mapScale.value)
              : const SizedBox(height: 0))
        ],
      ),
    ));
  }

  Widget _wDuration() {
    return Obx(() => Text(controller.beginDurationStr,
        maxLines: 1,
        style: const TextStyle(
          fontSize: 29,
          fontFamily: 'sa-digital-number',
        )));
  }

  Widget _process() {
    return Obx(() => Text('${_model.validCPCount}/${_model.validCPAllNum}',
        maxLines: 1,
        style: const TextStyle(
          fontSize: 32,
        )));
  }

  Widget _nextCPDistance() {
    var unit = ' km';
    var value = '--';
    final km = controller.nextControlPointDistanceKm;
    if (km != null) {
      var i = km;
      if (km < 1) {
        unit = ' m';
        i *= 1000;
      }
      value = i.round().toString();
    }

    return RichText(
        text: TextSpan(
            text: value,
            style:
                const TextStyle(fontSize: 28.31, fontWeight: FontWeight.w500),
            children: [
          TextSpan(
              text: unit,
              style:
                  const TextStyle(fontSize: 13.07, fontWeight: FontWeight.w500))
        ]));
  }

  Widget _topElemHub() {
    const space = 6.5;
    return Obx(() => Stack(
          children: [
            Column(
              children: [
                Row(children: [
                  _Elem(
                      child: _model.nextPlanPoint.display(
                          textStyle: const TextStyle(
                              fontSize: 21.78, fontWeight: FontWeight.w500))),
                  const SizedBox(width: space),
                  _Elem(
                      child: Padding(
                          padding: const EdgeInsets.only(left: 16, right: 16),
                          child: _model.widgetDistance(
                              withTrip: !controller.isInGameUISimplifyMode))),
                ]),
                const SizedBox(height: space),
                Row(children: [
                  _Elem(child: _nextCPDistance()),
                  const SizedBox(width: space),
                  _Elem(
                      child: Padding(
                          padding: const EdgeInsets.only(left: 16, right: 16),
                          child: _model.widgetPace(
                              withTrip: !controller.isInGameUISimplifyMode))),
                ])
              ],
            ),
            Positioned(
                left: 0,
                top: 0,
                child: getSmallTitle('目标')
            ),
            Positioned(
                right: 0,
                top: 0,
                child: getSmallTitle('里程')
            ),
            Positioned(
                left: 0,
                bottom: 0,
                child: getSmallTitle('点距')
            ),
            Positioned(
                right: 0,
                bottom: 0,
                child: getSmallTitle('配速')
            ),
          ],
        ));
  }

  Widget _compass() {
    return Obx(() => Compass2(
          compassRadians: _model.compassRadiansSrc.value,
          mapNorthRadians: _model.compassRadiansSrc.value,
          nextPointRadians: controller.nextCPRadians,
          level: 1,
          showDegrees: _model.compassShowDegrees,
          diameter: 230,
          nextPointImage: Image.asset('assets/images/im_compass_next_arrow2.png'),
          nextPointHeight: 100,
          degreeColor: Colors.white,
          plantSrc: 'assets/images/im_compass_no_map.png',
        ));
  }

  Widget _heartRate() {
    return Obx(() => Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            wHrp(),
            Container(
                width: 1,
                height: 53,
                color: Colors.white.withAlpha((255 * 0.3).round())),
            wHr(),
          ],
        ));
  }

  Widget wHrp() {
    final hrp = _model.heartRatePercent.value.round();
    return Row(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('$hrp',
            style: const TextStyle(fontSize: 43, fontWeight: FontWeight.w700)),
        const Text('%',
            style: TextStyle(fontSize: 20, fontWeight: FontWeight.w700))
      ],
    );
  }

  Widget wHr() {
    return Row(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('${_model.heartRate.value}',
            style: const TextStyle(fontSize: 43, fontWeight: FontWeight.w700)),
        Padding(
            padding: const EdgeInsets.only(top: 5),
            child: Image.asset('assets/images/ic_heart.png', height: 14.4))
      ],
    );
  }

  Widget _sports() {
    const style = TextStyle(fontSize: 15.24, fontWeight: FontWeight.w500);

    return Obx(() => Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            wSport(
                '${_model.stepCount.value}', 'assets/images/ic_step_count.png',
                textStyle: style),
            wSport(_model.kCal.value.toStringAsFixed(1),
                'assets/images/ic_kcal.png',
                textStyle: style),
            wSport(
                _model.ck.value.toStringAsFixed(1), 'assets/images/ic_ck.png',
                textStyle: style),
            wSport(_model.ei.round().toString(), 'assets/images/ic_ei.png',
                textStyle: style),
          ],
        ));
  }

  Widget _bottomBar() {
    return Obx(() => Padding(
        padding: const EdgeInsets.only(bottom: 20, left: 20, right: 20),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            GestureDetector(
                onTap: _onSetMapScale,
                child: Image.asset('assets/images/btn_ruler_scale_no_map.png',
                  width: 46,
                )),
            SizedBox(
                width: 56,
                height: 56,
                child: ButtonPunch(
                    onPressed: controller.isCheckCPButtonEnable
                        ? controller.onCheckControlPoint
                        : null,
                  isWarn: controller.isCheckCPButtonWarn,
                )),
            GestureDetector(
                onTap: () => controller.isNoMapRulerScaleMode.value = true,
                child: Image.asset(
                  'assets/images/btn_ruler_no_map.png',
                  width: 46,
                ))
          ],
        )));
  }
  Widget _topButton({required VoidCallback onPressed, required String src}){
    return GestureDetector(
      onTap: onPressed,
      child: Image.asset(
        src,
        width: 34,
        height: 34,
      )
    );
  }
  Widget _topButtonBar() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        _topButton(
          onPressed: () => Get.to(() => InfoView()),
           src: 'assets/images/btn_info_no_map.png'
        ),
        _topButton(
            onPressed: (){},
            // showCheckedPoints,
            src: 'assets/images/btn_past_cp_no_map.png'
        ),
        _topButton(
            onPressed: _onBrightness,
            src: 'assets/images/btn_brightness_no_map.png'
        ),
        _topButton(
            onPressed: controller.toSettings,
            src: 'assets/images/btn_settings_no_map.png'
        ),
        _topButton(
            onPressed: ()=>onButtonExit(controller),
            src: 'assets/images/btn_exit_no_map.png'
        ),
      ],
    );
  }
  void _onBrightness()async{
    await controller.setIsBrightnessMax(!controller.isBrightnessMax);
  }

  _onSetMapScale() {
    var value = controller.mapScale.value?.toString() ?? '';

    Get.dialog(AlertDialog(
      title: const Text('设置比例尺'),
      content: Row(
        children: [
          const Text(
            '1 :',
            style: TextStyle(fontSize: 16),
          ),
          const SizedBox(
            width: 6,
          ),
          SizedBox(
              width: 120,
              child: TextField(
                  onChanged: (v) {
                    value = v;
                  },
                  keyboardType: TextInputType.number,
                  controller: TextEditingController.fromValue(
                      TextEditingValue(text: value)))),
        ],
      ),
      actions: [
        TextButton(
            onPressed: () {
              Get.back();
            },
            child: const Text('取消')),
        TextButton(
            onPressed: () {
              controller.mapScale.value = double.tryParse(value);
              Get.back();
            },
            child: const Text('确定')),
      ],
    ));
  }
}

class _Elem extends StatelessWidget {
  const _Elem({required this.child});

  final Widget child;

  @override
  Widget build(BuildContext context) {
    return Expanded(
        child: Container(
      height: 55,
      alignment: Alignment.center,
      decoration: BoxDecoration(
          color: const Color(0x29ffffff),
          border: Border.all(color: const Color(0x43ffffff), width: 1.09),
          borderRadius: BorderRadius.circular(2.18)),
      child: child,
    ));
  }
}

class _Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return InGameNoMapView();
  }
}

void main() async {
  Mock.initServices();
  await App.to.init();
  Get.put(GameModel());
  Get.put(GameService());
  await GameService.to.gameStart();
  // await GameService.to.gameLoad();

  var c = InGameControllerMock();
  Get.put<InGameController>(c);

  runApp(GetMaterialApp(
      theme: ThemeData(useMaterial3: true, colorScheme: lightColorScheme),
      home: _Home()));
}