import 'package:electronic_assistant/base/base_controller.dart';
import 'package:electronic_assistant/base/base_page.dart';
import 'package:electronic_assistant/resource/colors.gen.dart';
import 'package:electronic_assistant/resource/string.gen.dart';
import 'package:electronic_assistant/router/app_pages.dart';
import 'package:electronic_assistant/utils/common_style.dart';
import 'package:electronic_assistant/utils/expand.dart';
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:get/get_core/src/get_main.dart';

import '../../resource/assets.gen.dart';
import 'controller.dart';

class ShortCutPage extends BasePage<ShortCutController> {
  const ShortCutPage({super.key});

  static Future? start() {
    return Get.toNamed(RoutePath.recordShortcut);
  }

  @override
  Color backgroundColor() {
    return '#F6F6F6'.color;
  }

  @override
  Widget buildBody(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.transparent,
        appBar: _buildAppBar(),
        body: _buildShortcutContainer());
  }

  Widget _buildShortcutContainer() {
    return SingleChildScrollView(
        child: Container(
            padding: EdgeInsets.all(12.w),
            margin: EdgeInsets.symmetric(horizontal: 12.w, vertical: 12.w),
            decoration: const BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(12)),
            ),
            child: Column(
              children: [
                SizedBox(height: 8.w),
                Row(
                  children: [
                    getStep('1'),
                    SizedBox(width: 6.w),
                    Text(
                      '点击',
                      style: TextStyle(
                          fontSize: 14.sp, color: ColorName.primaryTextColor),
                    ),
                    Text(
                      '【添加快捷指令】',
                      style: TextStyle(
                          fontSize: 14.sp, color: ColorName.colorPrimary),
                    ),
                  ],
                ),
                SizedBox(height: 32.w),
                GestureDetector(
                  onTap: controller.onAddIosShortCut,
                  child: Container(
                      width: 240.w,
                      height: 48.w,
                      decoration: getCommonDecoration(8.w),
                      child: Center(
                          child: Text('添加快捷方式',
                              style: TextStyle(
                                  fontSize: 16.sp, color: ColorName.white)))),
                ),
                SizedBox(height: 32.w),
                Row(
                  children: [
                    getStep('2'),
                    SizedBox(width: 6.w),
                    Text(
                      '依照教程，设置权限',
                      style: TextStyle(
                          fontSize: 14.sp, color: ColorName.primaryTextColor),
                    )
                  ],
                ),
                SizedBox(height: 12.w),
                Container(
                  padding: EdgeInsets.only(left: 32.w),
                  child: _buildTwoStepDesc(),
                ),
                SizedBox(height: 12.w),
                Container(
                  margin: EdgeInsets.only(left: 24.w),
                  child: GestureDetector(
                    onTap: controller.onShowIosShortcutVideo,
                    child: AspectRatio(
                        aspectRatio: 852 / 444,
                        child: Assets.images.bgIosShortcutVideoPreview.image()),
                  ),
                ),
                SizedBox(height: 32.w),
                Row(
                  children: [
                    getStep('3'),
                    SizedBox(width: 6.w),
                    Text(
                      '快点下手机背面，体验快捷录音吧~',
                      style: TextStyle(
                          fontSize: 14.sp, color: ColorName.primaryTextColor),
                    )
                  ],
                ),
                SizedBox(height: 8.w),
              ],
            )));
  }

  Widget _buildTwoStepDesc() {
    return Column(
      children: [
        Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              decoration: const BoxDecoration(
                color: ColorName.secondaryTextColor,
                shape: BoxShape.circle,
              ),
              width: 3.w,
              height: 3.w,
              margin: EdgeInsets.only(right: 10.w, top: 8.w),
            ),
            Expanded(
              child: RichText(
                  text: TextSpan(
                      style: TextStyle(
                          fontSize: 13.sp, color: ColorName.secondaryTextColor),
                      children: const [
                    TextSpan(text: "在手机"),
                    TextSpan(
                        text: "【设置】",
                        style: TextStyle(color: ColorName.colorPrimary)),
                    TextSpan(text: "中点击"),
                    TextSpan(
                        text: "【辅助功能】",
                        style: TextStyle(color: ColorName.colorPrimary)),
                    TextSpan(text: "-"),
                    TextSpan(
                        text: "【触控】",
                        style: TextStyle(color: ColorName.colorPrimary)),
                    TextSpan(text: "，滑动至底部找到"),
                    TextSpan(
                        text: "【轻点背面】",
                        style: TextStyle(color: ColorName.colorPrimary)),
                  ])),
            )
          ],
        ),
        Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              decoration: const BoxDecoration(
                color: ColorName.secondaryTextColor,
                shape: BoxShape.circle,
              ),
              width: 3.w,
              height: 3.w,
              margin: EdgeInsets.only(right: 10.w, top: 8.w),
            ),
            Expanded(
              child: RichText(
                  text: TextSpan(
                      style: TextStyle(
                          fontSize: 13.sp, color: ColorName.secondaryTextColor),
                      children: const [
                    TextSpan(text: "进入"),
                    TextSpan(
                        text: "【轻点背面】",
                        style: TextStyle(color: ColorName.colorPrimary)),
                    TextSpan(text: "，找到"),
                    TextSpan(
                        text: "【轻点两下/三下】",
                        style: TextStyle(color: ColorName.colorPrimary)),
                    TextSpan(text: "，选"),
                    TextSpan(
                        text: "【--小听快听】",
                        style: TextStyle(color: ColorName.colorPrimary)),
                  ])),
            )
          ],
        )
      ],
    );
  }

  Widget getStep(String step) {
    return Container(
      width: 20.w,
      height: 20.w,
      decoration: const BoxDecoration(
        color: ColorName.colorPrimary, // Set the background color
        shape: BoxShape.circle, // Set the shape to circle
      ),
      child: Center(
        child: Text(step,
            style:
                TextStyle(fontSize: 14.sp, color: ColorName.white, height: 1)),
      ),
    );
  }

  AppBar _buildAppBar() {
    return AppBar(
      scrolledUnderElevation: 0,
      leading: IconButton(
        icon: SizedBox(
            width: 24.w,
            height: 24.w,
            child: Assets.images.iconRecordShortcutPageClose.image()),
        // Custom icon
        onPressed: () {
          Get.back();
        },
      ),
      title: Text(StringName.recordShortcutTitle.tr,
          style: TextStyle(
              fontSize: 17.sp,
              color: ColorName.primaryTextColor,
              fontWeight: FontWeight.bold)),
      centerTitle: true,
      backgroundColor: Colors.transparent,
      elevation: 0,
    );
  }
}