import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:keyboard/base/base_page.dart';
import 'package:keyboard/module/intimacy_analyse/screenshot_reply/intimacy_analyse_screenshot_reply_view.dart';
import '../../resource/assets.gen.dart';
import '../../resource/colors.gen.dart';
import '../../router/app_pages.dart';
import '../../widget/tabbar/custom_tab_indicator.dart';
import 'analyse_report/intimacy_analyse_report_view.dart';
import 'intimacy_analyse_controller.dart';

/// 亲密度报告页
class IntimacyAnalysePage extends BasePage<IntimacyAnalyseController> {
  const IntimacyAnalysePage({super.key});

  @override
  bool immersive() {
    // 开启沉浸式
    return true;
  }

  @override
  backgroundColor() {
    return Colors.transparent;
  }

  static start() {
    Get.toNamed(RoutePath.intimacyAnalyse);
  }

  @override
  Widget buildBody(BuildContext context) {
    return Scaffold(
      backgroundColor: backgroundColor(),
      body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: Assets.images.bgIntimacyAnalyse.provider(),
            fit: BoxFit.fill,
          ),
        ),
        child: Column(
          children: [_buildStatusBar(), _buildTopBar(), _buildContent()],
        ),
      ),
    );
  }

  /// 导航栏占位
  Widget _buildStatusBar() {
    return Container(
      // 导航栏高度
      height: MediaQuery.of(Get.context!).padding.top,
      color: backgroundColor(),
    );
  }

  /// 顶部栏
  Widget _buildTopBar() {
    return Container(
      // 宽度撑满父组件
      width: double.infinity,
      // 背景颜色
      color: Colors.transparent,
      // padding: EdgeInsets.symmetric(horizontal: 16.0),
      child: ConstrainedBox(
        // 设置宽度为无限大，撑满父组件，否则Stack获取不到高度，会报错
        constraints: BoxConstraints(minWidth: double.infinity),
        child: Stack(
          alignment: Alignment.center,
          children: [
            // 返回按钮
            Positioned(
              left: 16.0,
              child: GestureDetector(
                onTap: controller.clickBack,
                child: Assets.images.iconWhiteBackArrow.image(
                  width: 24.w,
                  height: 24.h,
                ),
              ),
            ),
            // TabBar
            Positioned(child: _buildTabBar()),
          ],
        ),
      ),
    );
  }

  /// 指示器
  TabBar _buildTabBar() {
    return TabBar(
      // 是否可以滚动
      isScrollable: true,
      // 去除底部的黑线
      dividerHeight: 0,
      // 去除左边的边距，让Tab居中
      tabAlignment: TabAlignment.start,
      // 指示器的颜色
      indicator: _buildGradientLineIndicator(),
      // 选中时的颜色
      labelStyle: TextStyle(
        fontSize: 17.sp,
        fontWeight: FontWeight.bold,
        color: ColorName.white,
      ),
      // 未选中时的颜色
      unselectedLabelStyle: TextStyle(
        fontSize: 17.sp,
        color: ColorName.white70,
      ),
      // 配置Tab数据
      tabs:
          controller.tabBarList.map((tab) {
            return Tab(text: tab);
          }).toList(),
      controller: controller.tabController,
      onTap: (index) {
        controller.handleTabChange(index);
      },
    );
  }

  // 自定义渐变指示器
  CustomTabIndicator _buildGradientLineIndicator() {
    return CustomTabIndicator(
      // 指示器的宽度
      width: 16.0,
      // 指示器的形状，圆角
      strokeCap: StrokeCap.round,
      // 设置渐变色
      gradient: LinearGradient(
        colors: [ColorName.colorBrand, ColorName.colorAuxiliary1],
        begin: Alignment.centerLeft,
        end: Alignment.centerRight,
      ),
      // 指示器距离Tab的外边距
      insets: EdgeInsets.only(top: 9),
      // 指示器的高度
      borderSide: BorderSide(width: 4),
    );
  }

  /// PageView
  Widget _buildContent() {
    return Expanded(
      child: PageView(
        controller: controller.pageController,
        onPageChanged: (index) {
          controller.handlePageChange(index);
        },
        children: [
          // 报告Tab
          IntimacyAnalyseReportView(),
          // 截图回复Tab
          IntimacyAnalyseScreenshotReplyView(),
        ],
      ),
    );
  }
}