import 'package:flutter/Material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:get/get_core/src/get_main.dart';
import 'package:keyboard/base/base_view.dart';
import '../../../resource/assets.gen.dart';
import '../../../resource/colors.gen.dart';
import '../../../resource/string.gen.dart';
import '../../../utils/status_bar_util.dart';
import '../../../widget/app_lifecycle_widget.dart';
import '../../../widget/gradient_btn.dart';
import '../../../widget/status_bar_placeholder_widget.dart';
import '../../../widget/top_bar.dart';
import '../widget/tutorial_header_widget.dart';
import 'keyboard_tutorial_ios_view_controller.dart';

class KeyboardTutorialIosView
    extends BaseView<KeyboardTutorialIosViewController> {
  const KeyboardTutorialIosView({super.key});

  @override
  Color backgroundColor() {
    return Color(0xFFF6F5FA);
  }

  @override
  Widget buildBody(BuildContext context) {
    return AppLifecycleWidget(
      onAppLifecycleCallback: (isForeground) async {},
      child: Stack(
        children: [
          // 头部
          Positioned(left: 0, top: 0, right: 0, child: _buildHeader(context)),
          // 状态栏和标题栏
          Positioned(
            left: 0,
            top: 0,
            right: 0,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [StatusBarPlaceholderWidget(), _buildTopBar()],
            ),
          ),
          // 内容，填充剩余部分
          Positioned.fill(
            top: 170.h + StatusBarUtil.getStatusBarHeight(Get.context!),
            left: 0,
            right: 0,
            child: Column(children: [_buildContent()]),
          ),
          // 底部按钮
          Positioned(
            left: 0,
            right: 0,
            bottom: 0,
            child: _buildBottomActionBtn(),
          ),
        ],
      ),
    );
  }

  /// 顶部栏
  Widget _buildTopBar() {
    return TopBar(
      // 返回按钮
      leftWidget: GestureDetector(
        onTap: controller.clickBack,
        child: Assets.images.iconBlackBackArrow.image(
          width: 24.w,
          height: 24.h,
        ),
      ),
      // 视频教程按钮
      rightWidget: GestureDetector(
        onTap: () {
          controller.clickTutorialVideo();
        },
        child: Text(
          StringName.keyboardTutorialVideo,
          style: TextStyle(
            color: ColorName.black85,
            fontSize: 14.sp,
            fontWeight: FontWeight.w500,
          ),
        ),
      ),
    );
  }

  /// 头部布局
  Widget _buildHeader(BuildContext context) {
    return TutorialHeaderWidget();
  }

  /// 内容
  Widget _buildContent() {
    return Expanded(child: Column(children: [_buildTutorialList()]));
  }

  /// 键盘设置教程列表
  Widget _buildTutorialList() {
    return Column(
      children: [
        _buildTutorialStep1(),
        SizedBox(height: 14.h),
        _buildTutorialStep2(),
      ],
    );
  }

  /// 步骤1
  Widget _buildTutorialStep1() {
    return _buildTutorialStep(
      StringName.tutorialEnableKeyboardIosStep1,
      Assets.images.keyboardTutorialIosStep1.image(width: 296.w, height: 152.h),
    );
  }

  /// 步骤2
  Widget _buildTutorialStep2() {
    return _buildTutorialStep(
      StringName.tutorialEnableKeyboardIosStep2,
      Assets.images.keyboardTutorialIosStep2.image(width: 296.w, height: 136.h),
    );
  }

  /// 步骤
  Widget _buildTutorialStep(String title, Image tutorialImage) {
    return _buildStepBg(
      child: Padding(
        padding: EdgeInsets.all(16.w),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 标题
            Text(
              title,
              style: TextStyle(
                color: ColorName.black80,
                fontWeight: FontWeight.w700,
                fontSize: 14.sp,
              ),
            ),
            SizedBox(height: 18.h),
            // 示意图
            tutorialImage,
          ],
        ),
      ),
    );
  }

  /// 步骤背景
  Widget _buildStepBg({required Widget child}) {
    return Container(
      decoration: BoxDecoration(
        color: ColorName.white,
        borderRadius: BorderRadius.circular(20.r),
        boxShadow: [
          BoxShadow(
            // x、y轴的偏移量
            offset: Offset(0, 2),
            // 模糊半径
            blurRadius: 10,
            // 阴影颜色
            color: Color(0x4FEBE7FA),
          ),
        ],
      ),
      child: child,
    );
  }

  /// 去开启键盘按钮
  Widget _buildEnableKeyboard() {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 50.w),
      child: GradientTextBtn(
        StringName.tutorialEnableKeyboardIos,
        onPressed: () {
          controller.goEnableKeyboard();
        },
      ),
    );
  }

  /// 底部操作按钮
  Widget _buildBottomActionBtn() {
    return Column(
      children: [
        // 去开启键盘按钮
        _buildEnableKeyboard(),
        // 距离底部一定距离
        SizedBox(height: 52.h),
      ],
    );
  }
}
