import 'package:trackoffical_app/generated/assets.dart';
import 'package:trackoffical_app/screen.dart';
import 'package:trackoffical_app/utils.dart';
import 'package:trackoffical_app/view/ingame/dialog/dialog_base.dart';
import '../layer/layer_controller.dart';
import 'guardian_controller.dart';
import '../m_icon_button.dart';

class LayerFrontUI extends GetView<LayerController> {
  const LayerFrontUI({super.key});

  @override
  Widget build(BuildContext context) {
    final pH = 4.96.wp;

    return Padding(
        padding: EdgeInsets.fromLTRB(
            pH, MediaQuery.of(context).padding.top + 5.0.wp, pH, 11.19.wp),
        child: Stack(
          children: [
            Column(
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    _ButtonBar(),
                    GestureDetector(
                      onTap: () => Get.back(),
                      child: Image.asset(Assets.imagesBtnMapBack,
                          height: 46.0, fit: BoxFit.fitHeight),
                    )
                  ],
                ),
                const Spacer(),
                _InfoCard(),
              ],
            )
          ],
        ));
  }
}

class _ButtonBar extends GetView<LayerController> {
  @override
  Widget build(BuildContext context) {
    final c = controller;
    if (c is! GuardianControllerMock) {
      return const SizedBox();
    }


    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        _btnLocUnderGuardian(),
        _btnLocUnderGuardianLock(c),
        MIconButton(
            icon: Image.asset(Assets.imagesBtnMapAdd),
            onPressed: () {
              controller.mapDoScale(1.2);
            }),
        MIconButton(
            icon: Image.asset(Assets.imagesBtnMapMinus),
            onPressed: () {
              controller.mapDoScale(0.8);
            }),
        _btnShowRoute(),
        _btnLocateGuardian(),
        _btnShowGuardian()
      ],
    );
  }

  Widget _btnLocUnderGuardian(){
    return Obx((){
      final c = controller;
      if (c is! GuardianControllerMock) {
        return const SizedBox();
      }
      final person = c.selectedPersonData;
      final position = person?.myPositionOnMap;

      return MIconButton(
          src: Assets.imagesBtnLocUnderGuardian,
          onPressed: position!=null?(){
            c.moveOnMapPointToScreen(position, c.mapRotateCenter.value);
          }: null);
    });
  }

  Widget _btnLocUnderGuardianLock(GuardianControllerMock c){
    return Obx((){
      final person = c.selectedPersonData;

      return MIconButton(
          src: Assets.imagesBtnLocUnderGuardianUnlock,
          selectedSrc: Assets.imagesBtnLocUnderGuardianLock,
          isSelected: person?.userId==c.lockUnderGuardianToCenterUserId.value,
          onPressed: person!=null?(){
            c.lockUnderGuardianToCenter(person);
          } :null);
    });
  }
  Widget _btnShowRoute(){
    return Obx((){
      final c = controller;
      if (c is! GuardianControllerMock) {
        return const SizedBox();
      }

      return MIconButton(
          src: Assets.imagesBtnShowRouteSwitch,
          isSelected: c.isShowRoute.value,
          onPressed: ()=>c.isShowRoute.value=!c.isShowRoute.value);
    });
  }

  Widget _btnShowGuardian(){
    return Obx((){
      final c = controller;
      if (c is! GuardianControllerMock) {
        return const SizedBox();
      }

      return MIconButton(
          src: Assets.imagesBtnGuardianLocationSwitch,
          isSelected: c.isShowGuardian.value,
          onPressed: ()=>c.isShowGuardian.value=!c.isShowGuardian.value);
    });
  }
  Widget _btnLocateGuardian(){
    final c = controller;
    if (c is! GuardianControllerMock) {
      return const SizedBox();
    }

    return Obx((){
      final c = controller;
      if (c is! GuardianControllerMock) {
        return const SizedBox();
      }

      return MIconButton(
          src: Assets.imagesBtnGuardianLocation,
          onPressed: c.isShowGuardian.value? c.moveScreenCenterToGuardianLocation :null);
    });
  }
}

class _InfoCard extends GetView<LayerController> {
  @override
  Widget build(BuildContext context) {
    return Obx(() {
      final c = controller;
      if (c is! GuardianControllerMock) {
        return const SizedBox();
      }
      final personData = c.selectedPersonData;
      if (personData == null) {
        return const SizedBox();
      }
      final nextWantCP = personData.nextWantPoint;
      var nextWantCPDistance = '--';
      var nextWantCPDistanceD = personData.nextWantCPDistanceKmShow;
      if(nextWantCPDistanceD!=null){
        nextWantCPDistance = nextWantCPDistanceD.m.toInt().toString();
      }
      String? underGuardianDis;
      if(c.isShowGuardian.value){
        underGuardianDis = '--';

        final p1 = c.guardianPosition.value;
        final p2 = personData.myPosition;

        if(p1!= null && p2!= null){
          underGuardianDis = p2.distance(p1).m.toStringAsFixed(0);
        }
      }



      return Container(
        decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(3.82.wp),
            boxShadow: [
              BoxShadow(color: const Color(0x45000000), blurRadius: 1.53.wp)
            ]),
        padding: EdgeInsets.all(3.56.wp),
        width: context.width,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text.rich(TextSpan(
                        text: personData.userName,
                        style: TextStyle(
                            fontSize: 6.62.wp, fontWeight: FontWeight.w500),
                        children: [

                          // TextSpan(text: '  距离监护人米',
                          TextSpan(
                            text: underGuardianDis!=null?'  距离监护人$underGuardianDis米': ' ',
                            style: TextStyle(
                                fontSize: 3.56.wp,
                                fontWeight: FontWeight.w400,
                                color: context.theme.colorScheme.primary),
                          )
                        ])),
                    Text(
                      personData.duration.value.toAppString(),
                      style: TextStyle(
                          fontSize: 6.11.wp, fontFamily: 'sa-digital-number'),
                    )
                  ],
                ),
                bean(personData.beanCount.value, 4.5.wp),
              ],
            ),
            const Divider(),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                _wPointText(
                    '打点${personData.checkedCount}/${personData.validCPAllNum}'),
                _wPointText(
                    '里程${personData.myPositionHistoryLen.value}'),
                _wPointText(
                    '配速${personData.pacePerKm.value.toMinSecondString()}'),
              ],
            ),
            SizedBox(height: 2.0.wp),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                _wCardText('实时心率', "${personData.heartRate.value}",
                    color:  personData.heartRatePercent.value.round().toHRPColor()),
                _wCardText(
                    '目标', nextWantCP != null ? '${nextWantCP.snString}点' : ''),
                _wCardText('点距(米)', nextWantCPDistance),
                _wCardText('步数', '${personData.stepCount.value}'),
                _wCardText('消耗热量', personData.kCal.value.toStringAsFixed(1)),
              ],
            )
          ],
        ),
      );
    });
  }
}

Widget _wPointText(String text) {
  return Row(
    mainAxisSize: MainAxisSize.min,
    children: [
      Container(
        width: 2.0.wp,
        height: 2.0.wp,
        decoration: const BoxDecoration(
            shape: BoxShape.circle, color: Color(0xffff870d)),
      ),
      Text(
        text,
        style: TextStyle(fontSize: 4.0.wp, fontWeight: FontWeight.w500),
      ),
    ],
  );
}

Widget _wCardText(String title, String value, {Color? color}) {
  final valueColor = color != null ? Colors.white : Colors.black;
  final titleColor = color != null ? Colors.white : Colors.grey;

  return Container(
    width: 13.99.wp,
    height: 16.03.wp,
    decoration: BoxDecoration(
      color: color ?? const Color(0xfff9f9f9),
      borderRadius: BorderRadius.circular(1.53.wp),
    ),
    child: Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        Text(
          title,
          style: TextStyle(fontSize: 2.54.wp, color: titleColor),
        ),
        Text(
          value,
          style: TextStyle(fontSize: 4.0.wp, color: valueColor),
        )
      ],
    ),
  );
}