import 'package:chewie/chewie.dart';
import 'package:flutter/Material.dart';
import 'package:get/get_state_manager/src/rx_flutter/rx_obx_widget.dart';
import 'package:keyboard/base/base_view.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:keyboard/resource/assets.gen.dart';
import 'package:keyboard/resource/colors.gen.dart';
import 'package:keyboard/widget/status_bar_placeholder_widget.dart';
import 'package:keyboard/widget/top_bar.dart';
import 'package:video_player/video_player.dart';
import '../../../../utils/status_bar_util.dart';
import 'keyboard_tutorial_video_android_view_controller.dart';

/// 键盘教程页-视频引导页-Android平台
class KeyboardTutorialVideoAndroidView
    extends BaseView<KeyboardTutorialVideoAndroidViewController> {
  const KeyboardTutorialVideoAndroidView({super.key});

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

  @override
  Widget buildBody(BuildContext context) {
    return Scaffold(
      backgroundColor: backgroundColor(),
      body: Stack(
        children: [
          // 内容，填充剩余部分
          Positioned.fill(
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            child: SingleChildScrollView(child: _buildContent(context)),
          ),
          // 状态栏和标题栏
          Positioned(
            left: 0,
            top: 0,
            right: 0,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [StatusBarPlaceholderWidget(), _buildTopBar()],
            ),
          ),
        ],
      ),
    );
  }

  /// 顶部栏
  Widget _buildTopBar() {
    return TopBar(
      leftWidget: GestureDetector(
        onTap: controller.clickBack,
        child: Assets.images.iconBlackBackArrow.image(
          width: 24.w,
          height: 24.h,
        ),
      ),
    );
  }

  /// 头部布局
  Widget _buildHeader(BuildContext context) {
    return SizedBox(
      width: double.infinity,
      height: 230.h,
      child: Stack(
        alignment: Alignment.center,
        children: [
          // 蒙版
          Assets.images.bgKeyboardVideoTutorialHeaderMask.image(
            width: double.infinity,
            height: double.infinity,
          ),
          // 提示语
          Positioned(
            top: 20.h + StatusBarUtil.getStatusBarHeight(context),
            child: Assets.images.iconKeyboardTutorialVideoHeaderSlogan.image(
              width: 352.w,
              height: 178.h,
            ),
          ),
        ],
      ),
    );
  }

  /// 内容
  Widget _buildContent(BuildContext context) {
    return Container(
      // 渐变背景
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [Color(0x00FFFFFF), Color(0xFFF2EFFF)],
          begin: Alignment.topCenter,
          end: Alignment.bottomRight,
        ),
        shape: BoxShape.rectangle,
      ),
      child: Column(
        children: [
          // 头部
          _buildHeader(context),
          _buildTutorialVideo(),
        ],
      ),
    );
  }

  /// 教程视频
  Widget _buildTutorialVideo() {
    return Container(
      margin: EdgeInsets.only(left: 16, right: 16, bottom: 23),
      padding: EdgeInsets.all(12.w),
      decoration: BoxDecoration(
        color: ColorName.white,
        borderRadius: BorderRadius.all(Radius.circular(24.w)),
      ),
      child: Stack(
        alignment: Alignment.center,
        children: [
          Obx(() {
            if (!controller.isVideoInitialized.value) {
              return SizedBox(width: double.infinity, height: 542.h);
            } else {
              return AspectRatio(
                aspectRatio: controller.videoController.value.aspectRatio,
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(12.w),
                  child: Chewie(controller: controller.chewieController),
                ),
              );
            }
          }),
        ],
      ),
    );
  }
}
