import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:star_lock/main/lockDetail/lockSet/openDoorDirection/openDoorDirection_state.dart';

import '../../../../app_settings/app_colors.dart';
import '../../../../tools/titleAppBar.dart';
import 'openDoorDirection_logic.dart';

class OpenDoorDirectionPage extends StatefulWidget {
  const OpenDoorDirectionPage({Key? key}) : super(key: key);

  @override
  State<OpenDoorDirectionPage> createState() => _OpenDoorDirectionPageState();
}

class _OpenDoorDirectionPageState extends State<OpenDoorDirectionPage> {
  final OpenDoorDirectionLogic logic = Get.put(OpenDoorDirectionLogic());
  final OpenDoorDirectionState state = Get.find<OpenDoorDirectionLogic>().state;

  // bool isCheck = false;
  // int selectIndex = 0;
  // int _selectGroupValue = 1; //默认选中的单选框的值

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        appBar: TitleAppBar(
            barTitle: '开门方向设置'.tr,
            haveBack: true,
            backgroundColor: AppColors.mainColor),
        body: Column(
          children: <Widget>[
            SizedBox(
              height: 60.h,
            ),
            Container(
              margin: EdgeInsets.only(left: 40.w, right: 40.w),
              alignment: Alignment.centerLeft,
              child: Text(
                '开门方向设置提示'.tr,
                style: TextStyle(
                    fontSize: 24.sp,
                    color: Colors.black,
                    fontWeight: FontWeight.w500),
              ),
            ),
            Image.asset(
              'images/mine/icon_mine_openDoorDir.png',
              width: 500.w,
              height: 300,
            ),
            _buildRadioGroupRowWidget(),
            SizedBox(
              height: 60.h,
            ),
            _buildTipsView(
                "${'判断方法'.tr}:",
                '判断方法内容'.tr,
                false)
          ],
        ));
  }

  //单选框选择
  Row _buildRadioGroupRowWidget() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: <Widget>[
        // SizedBox(width: 60.w,),
        Row(
          children: <Widget>[
            Obx(() => _colorfulCheckBox(1)),
            Text(
              '左开'.tr,
              style: TextStyle(fontSize: 24.sp),
            ),
          ],
        ),
        // SizedBox(width: 100.w),
        Row(
          children: <Widget>[
            Obx(() => _colorfulCheckBox(2)),
            Text(
              '右开'.tr,
              style: TextStyle(fontSize: 24.sp),
            ),
          ],
        ),
      ],
    );
  }

  Radio _colorfulCheckBox(int selectIndex) {
    return Radio(
      value: selectIndex,
      onChanged: (value) {
        // _selectGroupValue = value;
        state.openDirectionValue.value = value;
        logic.sendOpenDoorDirection();
      },
      groupValue: state.openDirectionValue.value,
      activeColor: AppColors.mainColor,
    );
  }

  Widget _buildTipsView(String titleStr, String subTitle, bool isClick) {
    return Container(
      margin: EdgeInsets.only(left: 40.w),
      alignment: Alignment.centerLeft,
      child: _buildRichText(titleStr, subTitle, false),
    );
  }

  Widget _buildRichText(String titleStr, String subTitle, bool isClick) {
    //高亮样式
    final TextStyle titleStyle = TextStyle(
        color: isClick ? AppColors.blueTextTipsColor : Colors.black,
        fontSize: 24.sp,
        fontWeight: FontWeight.w500);
    //默认样式
    final TextStyle subTipsStyle = TextStyle(
        color: isClick
            ? AppColors.blueTextTipsColor
            : AppColors.placeholderTextColor,
        fontSize: 22.sp);

    late InlineSpan tipsPreviewSpan = TextSpan(children: <InlineSpan>[
      TextSpan(text: titleStr, style: titleStyle),
      TextSpan(text: subTitle, style: subTipsStyle),
    ]);
    return RichText(text: tipsPreviewSpan);
  }
}