import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:trackoffical_app/generated/assets.dart';
import 'package:trackoffical_app/service/game/game.dart';
import 'package:trackoffical_app/service/game/game_model.dart';
import 'package:trackoffical_app/view/game_settings.dart';
import 'package:trackoffical_app/view/ingame/route_planning.dart';
import 'utils.dart';
import 'button_punch.dart';
import 'info_view.dart';
import 'settings_view.dart';
import 'package:trackoffical_app/widget/compass2.dart';
import '../../styles/theme.dart';
import 'in_game_controller.dart';

class MButtonBar extends StatefulWidget {
  const MButtonBar({
    super.key,
    required this.isShowCheckCPButton,
    required this.isCheckCPButtonEnable,
  });

  final bool isShowCheckCPButton;
  final bool isCheckCPButtonEnable;

  @override
  State<StatefulWidget> createState() {
    return ButtonBarState();
  }
}

enum _ExpandState {
  hide,
  middle,
  all,
}

class ButtonBarState extends State<MButtonBar> {
  var state = _ExpandState.middle;
  final controller = Get.find<InGameController>();
  final service = GameService.to;
  final model = Get.find<GameModel>();

  @override
  void initState() {
    super.initState();

  }

  void onButtonMore() {
    setState(() {
      var i = state.index + 1;
      if (i >= _ExpandState.values.length) {
        i = 0;
      }
      state = _ExpandState.values[i];
    });
  }

  void onLockScreenCenterToMyPosition() {
    setState(() {
      if (!model.isLockScreenCenterToMyPositionSystem) {
        service.showLocation();
      }

      model.isLockScreenCenterToMyPosition.value =
          !model.isLockScreenCenterToMyPosition.value;
    });
  }

  void onRotateAt() {
    setState(() {
      controller.isMapRotateAtCompassCenter.value =
          !controller.isMapRotateAtCompassCenter.value;
    });

    controller.flushRotateCenter();
  }

  void btnMore(List<Widget> col) {
    var moreSrc = 'assets/images/btn_more1.png';
    if (state == _ExpandState.middle) {
      moreSrc = 'assets/images/btn_more2.png';
    }
    if (state == _ExpandState.all) {
      moreSrc = 'assets/images/btn_more3.png';
    }
    col.add(_Button(icon: Image.asset(moreSrc), onPressed: onButtonMore));
  }

  // 屏幕移至站立点
  void btnMyLocation(List<Widget> col) {
    col.add(_Button(
        icon: Image.asset('assets/images/btn_location.png'),
        disableSrc: 'assets/images/btn_location_disable.png',
        onPressed: model.isEnableUserLocation ? service.showLocation : null));
  }

  // 跳点
  void btnSkipCp(List<Widget> col) {
    // if (model.isAllowedPassCP) {
    if (true) {
      col.add(_Button(
        icon: Image.asset('assets/images/btn_skip_cp.png'),
        disableSrc: Assets.imagesBtnSkipCpDisable,
      ));
    }
  }

  // 路线规划
  void btnPathPlanning(List<Widget> col) {
    // if (model.isAllowedPassCP) {
    if (true) {
      col.add(Obx(() => _Button(
            icon: Image.asset('assets/images/btn_path_planning.png'),
            disableSrc: Assets.imagesBtnPathPlanningDisable,
            onPressed:
                model.startAt != null ? () => dialogRoutePlanning() : null,
          )));
    }
  }

  // 地图旋转中心
  void btnMapRotateCenter(List<Widget> col) {
    var rotateSrc = 'assets/images/btn_rotate_at1.png';
    if (controller.isMapRotateAtCompassCenter.value) {
      rotateSrc = 'assets/images/btn_rotate_at2.png';
    }
    col.add(_Button(icon: Image.asset(rotateSrc), onPressed: onRotateAt));
  }

  // 锁定旋转中心
  void btnLockRotateCenter(List<Widget> col) {
    if (model.isAlwaysShowMyLocation) {
      var src = 'assets/images/btn_unlock.png';
      if (model.isLockScreenCenterToMyPosition.value) {
        src = 'assets/images/btn_locked.png';
      }

      col.add(_Button(
          icon: Image.asset(src),
          disableSrc: 'assets/images/btn_unlock_disable.png',
          onPressed: model.isEnableUserLocation
              ? onLockScreenCenterToMyPosition
              : null));
    }
  }

  onMapModeSwitch() {
    service.mapStatus.mapModeSwitch();
    service.showNextPoint();
  }

  @override
  Widget build(BuildContext context) {
    final col1 = <Widget>[];

    btnMore(col1);

    if (state == _ExpandState.middle || state == _ExpandState.all) {
      // 标定地图方式
      col1.add(_Button(
          icon: Image.asset('assets/images/btn_map_rotate.png'),
          onPressed: onMapModeSwitch));
      btnMyLocation(col1);
      btnLockRotateCenter(col1);
      col1.addAll([
        // 行动轨迹
        _Button(
            icon: Image.asset('assets/images/btn_trajectory.png'),
            disableSrc: 'assets/images/btn_trajectory_disable.png',
            onPressed: model.isEnableUserLocation
                ? () => setState(() {
                      model.isShowTrajectory.value =
                          !model.isShowTrajectory.value;
                    })
                : null,
            isSelected: model.isShowTrajectory.value),

        // 亮度
        _Button(
          icon: Image.asset('assets/images/btn_brightness.png'),
          onPressed: _onBrightness,
          isSelected: controller.isBrightnessMax,
        ),
      ]);
    }

    final col2 = <Widget>[];
    final col3 = <Widget>[];
    if (state == _ExpandState.all) {
      col2.addAll([
        // 指北针大小
        _Button(
            icon: Image.asset('assets/images/btn_compass_size.png'),
            onPressed: controller.onSwitchCompassSize),

        // 指北针显示
        _Button(
          icon: Image.asset('assets/images/btn_compass.png'),
          onPressed: () => setState(() {
            controller.showCompassSwitch();
          }),
          isSelected: service.isShowCompass.value,
        ),
        // 指南针样式
        _Button(
            icon: Image.asset('assets/images/btn_compass_level.png'),
            onPressed: onClickCompassLevel),

        // 是否显示下一点方向
        _Button(
          icon: Image.asset('assets/images/btn_next_cp.png'),
          onPressed: () => setState(() {
            controller.isShowNextCPRadians.value =
                !controller.isShowNextCPRadians.value;
          }),
          isSelected: controller.isShowNextCPRadians.value,
        ),
      ]);

      btnSkipCp(col2);

      col2.add(_Button(
          icon: Image.asset('assets/images/btn_past_cp.png'),
          onPressed: (){}
          // showCheckedPoints
      ));

      col3.addAll([
        // 图例
        _Button(
            icon: Image.asset('assets/images/btn_info.png'),
            onPressed: _showInfo),
        // 设置
        _Button(
            icon: Image.asset('assets/images/btn_settings.png'),
            onPressed: _toSettings),

        // 显示标尺
        _Button(
          icon: Image.asset('assets/images/btn_ruler.png'),
          onPressed: () => setState(() {
            controller.isShowRuler.value = !controller.isShowRuler.value;
          }),
          isSelected: controller.isShowRuler.value,
        ),
      ]);

      btnMapRotateCenter(col3);
      btnPathPlanning(col3);

      // 退赛
      col3.add(_Button(
          icon: Image.asset('assets/images/btn_exit.png'),
          onPressed: () => onButtonExit(controller)));
    }

    final children = <Widget>[
      Row(
        children: [
          Column(
            children: col1,
          ),
          const Spacer(),
          Column(children: col2),
          Column(children: col3)
        ],
      ),
    ];
    if (widget.isShowCheckCPButton) {
      final color = widget.isCheckCPButtonEnable ? Colors.black : Colors.grey;

      children.addAll([
        const Spacer(),
        Row(
          children: [
            const Spacer(),
            ButtonPunch(
              onPressed: widget.isCheckCPButtonEnable
                  ? controller.onCheckControlPoint
                  : null,
              isWarn: controller.isCheckCPButtonWarn,
            ),
          ],
        ),
        const SizedBox(height: 12),
      ]);
    }

    return Padding(
        padding: const EdgeInsets.only(left: 12, right: 12),
        child: Column(
          children: children,
        ));
  }

  void _onBrightness() async {
    await controller.setIsBrightnessMax(!controller.isBrightnessMax);
    setState(() {});
  }

  Future<void> _toSettings() async {
    await controller.toSettings();
    setState(() {});
  }

  void _showInfo() {
    Get.to(() => InfoView());
  }

  void onClickCompassLevel() {
    var l = controller.compassLevel.value;
    l++;
    if (l > Compass2.levelMax) {
      l = Compass2.levelMin;
    }
    controller.compassLevel.value = l;
  }
}

class _Button extends StatelessWidget {
  const _Button({
    required this.icon,
    this.onPressed,
    this.isSelected = false,
    this.disableSrc,
  });

  final bool isSelected;
  final Widget icon;
  final VoidCallback? onPressed;
  final String? disableSrc;

  @override
  Widget build(BuildContext context) {
    const s = 46.0;

    final children = <Widget>[
      SizedBox(
          width: s,
          height: s,
          child: onPressed != null ? icon : Image.asset(disableSrc!))
    ];

    if (isSelected && onPressed != null) {
      children.add(Image.asset(
        'assets/images/btn_boader.png',
        width: s,
        height: s,
      ));
    }

    return GestureDetector(
      onTap: onPressed,
      child: Stack(
        children: children,
      ),
    );
  }
}

void main() async {
  runApp(GetMaterialApp(
      theme: appThemeData(),
      home: const Scaffold(
        body: MButtonBar(
          isShowCheckCPButton: true,
          isCheckCPButtonEnable: true,
        ),
      )));
}