import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:star_lock/main/lockDetail/lockSet/liveVideo/liveVideo_logic.dart';
import 'package:star_lock/main/lockDetail/lockSet/liveVideo/liveVideo_state.dart';

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

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

  @override
  State<LiveVideoPage> createState() => _LiveVideoPageState();
}

class _LiveVideoPageState extends State<LiveVideoPage> {
  final LiveVideoLogic logic = Get.put(LiveVideoLogic());
  final LiveVideoState state = Get.find<LiveVideoLogic>().state;

  @override
  initState() {
    super.initState();
    logic.getLockSettingInfoData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: AppColors.mainBackgroundColor,
        appBar: TitleAppBar(
          barTitle: '实时画面',
          haveBack: true,
          backAction: () {
            Navigator.pop(context, true);
          },
          backgroundColor: AppColors.mainColor,
          actionsList: <Widget>[
            TextButton(
              child: Text(
                '保存'.tr,
                style: TextStyle(color: Colors.white, fontSize: 24.sp),
              ),
              onPressed: () {
                state.isLiveView.value == false
                    ? state.realTimeMode.value = 0
                    : state.realTimeMode.value = 1;

                logic.updateCatEyeModeConfig();
              },
            ),
          ],
        ),
        body: Obx(() => Column(
              children: <Widget>[
                SizedBox(
                  height: 80.h,
                ),
                Image.asset(
                  'images/lockSet_liveVideo.png',
                  height: 541.h,
                  width: 255.w,
                ),
                SizedBox(
                  height: 86.h,
                ),
                _buildTipsView(
                    '发生事件时查看\n', '仅当门锁发生事件或有人按门铃时，才能在门锁首页查看实时画面。', 0),
                SizedBox(
                  height: 16.h,
                ),
                _buildTipsView('实时查看\n',
                    '指定时问内，无论门锁是否发生安全事件或有人按门铃，都能在门锁首页随时查看实时画面；电池续航时问将会缩短。', 1),
              ],
            )));
  }

  Widget _buildTipsView(String titleStr, String subTitle, int clickIndex) {
    return GestureDetector(
      child: Container(
        width: ScreenUtil().screenWidth - 40.w,
        margin: EdgeInsets.only(left: 20.w, right: 20.w, bottom: 10.h),
        decoration: BoxDecoration(
          color: clickIndex == 0
              ? (state.isLiveView.value == false
                  ? AppColors.blueViewBgColor
                  : AppColors.greyBackgroundColor)
              : (state.isLiveView.value == true
                  ? AppColors.blueViewBgColor
                  : AppColors.greyBackgroundColor),
          borderRadius: BorderRadius.circular(10.0),
        ),
        child: Padding(
            padding: EdgeInsets.only(
                left: 20.w, top: 30.h, bottom: 30.h, right: 20.w),
            child: Row(
              children: <Widget>[
                clickIndex == 0
                    ? (state.isLiveView.value == false
                        ? Image.asset(
                            'images/mine/icon_mine_blueSelect.png',
                            width: 20.w,
                            height: 14.w,
                          )
                        : SizedBox(
                            width: 20.w,
                            height: 14.w,
                          ))
                    : (state.isLiveView.value == true
                        ? Image.asset(
                            'images/mine/icon_mine_blueSelect.png',
                            width: 20.w,
                            height: 14.w,
                          )
                        : SizedBox(
                            width: 20.w,
                            height: 14.w,
                          )),
                SizedBox(width: 10.w),
                Expanded(
                  child: _buildRichText(
                      titleStr,
                      subTitle,
                      clickIndex == 0
                          ? (state.isLiveView.value == false ? true : false)
                          : (state.isLiveView.value == true ? true : false)),
                ),
              ],
            )),
      ),
      onTap: () {
        if (clickIndex == 0) {
          state.isLiveView.value = false;
        } else {
          state.isLiveView.value = true;
        }
      },
    );
  }

  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: 20.sp);

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