import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flyinsono/lab/color/lab_colors.dart';
import 'package:fis_measure/process/language/measure_language.dart';
import 'package:fis_measure/interfaces/process/items/terms.dart';
import 'package:get/get.dart';
import 'package:fis_measure/process/workspace/measure_data_controller.dart';

class MeasureItemButton extends StatefulWidget {
  MeasureItemButton({
    super.key,
    required this.isSelected,
    required this.description,
    this.onTap,
  });

  final bool isSelected;
  final String description;
  final VoidCallback? onTap;

  @override
  State<MeasureItemButton> createState() => _MeasureItemButtonState();
}

class _MeasureItemButtonState extends State<MeasureItemButton> {
  bool _isHover = false;

  /// 测量语言包
  final measureLanguage = MeasureLanguage();

  /// 【TODO】 翻译
  String selectedType = "手动";

  String selectedLocation = "上";

  /// Styles
  late String fontFamily;
  static const Color buttonTextColor = Colors.white;
  final measureData = Get.find<MeasureDataController>();

  @override
  Widget build(BuildContext context) {
    return _buildItemButton();
  }

  Widget _buildNomalItemButton(
      Color bgColor, String transValue, String description) {
    // 非英文环境下显示中英文，否则只显示英文
    final ifShowCN = measureData.measureSystemSetting.showAnnotation;
    return Container(
      margin: EdgeInsets.only(bottom: 10),
      child: MouseRegion(
        cursor: SystemMouseCursors.click,
        onEnter: (_) {
          setState(() {
            _isHover = true;
          });
        },
        onExit: (_) {
          setState(() {
            _isHover = false;
          });
        },
        child: GestureDetector(
          onTap: widget.onTap,
          child: Container(
            padding: EdgeInsets.symmetric(vertical: 5, horizontal: 5),
            decoration: BoxDecoration(
              color: bgColor,
              borderRadius: BorderRadius.circular(3),
              border: widget.isSelected
                  ? Border.all(
                      color: Colors.transparent,
                    )
                  : Border.all(
                      color: LabColors.base400,
                    ),
            ),
            child: Center(
              child: Container(
                height: 46,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    if (ifShowCN)
                      Text(
                        transValue,
                        style: TextStyle(
                          fontSize: 14,
                          color: widget.isSelected
                              ? LabColors.text200
                              : LabColors.text700,
                        ),
                      ),
                    Text(
                      widget.description,
                      style: TextStyle(
                        fontSize: 16,
                        color: widget.isSelected
                            ? LabColors.text200
                            : LabColors.text700,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

  // 构建测量项按钮
  Widget _buildItemButton() {
    final Color bgColor = widget.isSelected
        ? LabColors.base600
        : _isHover
            ? LabColors.base200
            : Colors.transparent;
    final transValue = measureLanguage.t('measure', widget.description);
    if (AutomaticMeasureSupportedTerms.items.contains(widget.description)) {
      return _buildItemAutomaticMeasure(
          bgColor, transValue, widget.description);
    }
    return _buildNomalItemButton(bgColor, transValue, widget.description);
  }

  /// 构建特殊的自动测量项
  Widget _buildItemAutomaticMeasure(
      Color bgColor, String transValue, String description) {
    const Decoration _webDecoration = BoxDecoration(
      color: Color.fromRGBO(60, 60, 60, 1),
      borderRadius: BorderRadius.only(
          bottomLeft: Radius.circular(5), bottomRight: Radius.circular(5)),
    );
    const Decoration _mobileDecoration = BoxDecoration();
    // 非英文环境下显示中英文，否则只显示英文
    final ifShowCN = measureData.measureSystemSetting.showAnnotation;
    return Column(
      children: [
        Container(
          margin: EdgeInsets.only(bottom: 10),
          child: MouseRegion(
            cursor: SystemMouseCursors.click,
            onEnter: (_) {
              setState(() {
                _isHover = true;
              });
            },
            onExit: (_) {
              setState(() {
                _isHover = false;
              });
            },
            child: Column(
              children: [
                GestureDetector(
                  onTap: widget.onTap,
                  child: Container(
                    padding: EdgeInsets.symmetric(vertical: 5, horizontal: 5),
                    decoration: BoxDecoration(
                      color: bgColor,
                      borderRadius: BorderRadius.circular(3),
                      border: widget.isSelected
                          ? Border.all(
                              color: Colors.transparent,
                            )
                          : Border.all(
                              color: LabColors.base400,
                            ),
                    ),
                    child: Center(
                      child: Container(
                        height: 46,
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          children: [
                            if (ifShowCN)
                              Text(
                                transValue + "($selectedType)",
                                style: TextStyle(
                                  fontSize: 14,
                                  color: widget.isSelected
                                      ? LabColors.text200
                                      : LabColors.text700,
                                ),
                              ),
                            Text(
                              widget.description,
                              style: TextStyle(
                                fontSize: 16,
                                color: widget.isSelected
                                    ? LabColors.text200
                                    : LabColors.text700,
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),
                ),
                if (widget.isSelected) ...[
                  Container(
                    padding: kIsWeb
                        ? const EdgeInsets.only(top: 10, bottom: 5)
                        : null,
                    decoration: kIsWeb ? _webDecoration : _mobileDecoration,
                    child: Column(
                      children: [
                        if (kIsWeb)
                          Container(
                            margin: const EdgeInsets.symmetric(
                              horizontal: 11,
                            ),
                            width: double.infinity,
                            padding: const EdgeInsets.symmetric(
                                horizontal: 6, vertical: 5),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                /// 【TODO】 翻译 测量方式
                                Container(
                                  margin: const EdgeInsets.symmetric(
                                      vertical: 4, horizontal: 6),
                                  child: const Text(
                                    '测量方式',
                                    style: TextStyle(
                                      fontSize: 12,
                                      color: buttonTextColor,
                                    ),
                                  ),
                                ),
                                Row(
                                  children: ["自动", "半自动", "手动"]
                                      .map((e) => _buildMeasureButton(e, true))
                                      .toList(),
                                ),
                                if (selectedType == "自动") ...[
                                  Container(
                                    margin: const EdgeInsets.symmetric(
                                        vertical: 4, horizontal: 6),
                                    child: const Text(
                                      '跟踪方向',
                                      style: TextStyle(
                                        fontSize: 12,
                                        color: buttonTextColor,
                                      ),
                                    ),
                                  ),
                                  Row(
                                    children: ["上", "下", "全部"]
                                        .map((e) =>
                                            _buildMeasureButton(e, false))
                                        .toList(),
                                  ),
                                ]
                              ],
                            ),
                          ),
                      ],
                    ),
                  ),
                ]
              ],
            ),
          ),
        ),
      ],
    );
  }

  Widget _buildMeasureButton(String type, bool isType) {
    return Expanded(
      child: InkWell(
        onTap: () {
          if (isType) {
            selectedType = type;
          } else {
            selectedLocation = type;
          }
          setState(() {});
        },
        child: Container(
          height: 40,
          margin: const EdgeInsets.symmetric(horizontal: 2),
          decoration: BoxDecoration(
            color: (isType ? selectedType == type : selectedLocation == type)
                ? const Color.fromARGB(255, 101, 211, 71)
                : const Color.fromRGBO(70, 70, 70, 1),
            border: Border.all(color: const Color.fromRGBO(124, 124, 124, 1)),
            borderRadius: BorderRadius.circular(5),
          ),
          // margin: const EdgeInsets.symmetric(horizontal: 11, vertical: 5),
          child: Center(
            child: Text(
              type.toString(),
              style: const TextStyle(
                color: Colors.white,
              ),
            ),
          ),
        ),
      ),
    );
  }
}
