import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:keyboard/resource/string.gen.dart';

import '../../base/base_page.dart';
import '../../resource/assets.gen.dart';
import '../../router/app_pages.dart';
import '../../utils/app_info_util.dart';
import '../../widget/commonAppBar.dart';
import 'about_controller.dart';
import 'package:get/get.dart';

class AboutPage extends BasePage<AboutController> {
  const AboutPage({super.key});

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

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

  @override
  bool immersive() {
    return true;
  }

  @override
  Widget buildBody(BuildContext context) {
    return Stack(
      children: [
        Scaffold(
          appBar: CommonAppBar(
            title: StringName.aboutUs,
            backgroundColor: backgroundColor,
            onBack: () {
              controller.clickBack();
            },
          ),
          body: Container(
            color: backgroundColor(),
            child: Column(
              children: [
                Container(
                  margin: EdgeInsets.only(top: 40.w),
                  child: Column(
                    children: [
                      // icon
                      Container(
                        width: 72.w,
                        height: 72.w,
                        decoration: BoxDecoration(
                          color: Colors.grey[200],
                          borderRadius: BorderRadius.circular(16),
                        ),
                      ),
                      SizedBox(height: 21.h),
                      Text(
                        StringName.appName,
                        style: TextStyle(
                          color: Colors.black.withAlpha(204),
                          fontSize: 26.sp,
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                      SizedBox(height: 6.h),
                      // 版本号
                      Text(
                        '${StringName.currentVersion} ${appInfoUtil.appVersionName}',
                        style: TextStyle(
                          fontSize: 12.sp,
                          color: Colors.black.withAlpha(102),
                          fontWeight: FontWeight.w400,
                        ),
                      ),
                    ],
                  ),
                ),

                Container(
                  margin: EdgeInsets.symmetric(
                    horizontal: 16.w,
                    vertical: 28.h,
                  ),
                  padding: EdgeInsets.symmetric(vertical: 8.h),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(12.r),
                  ),
                  child: Column(
                    children: [
                      _buildListItem(
                        StringName.privacyPolicy,
                        onTap: controller.clickPrivacyPolicy,
                      ),
                      _buildDivider(),
                      _buildListItem(
                        StringName.serviceTerms,
                        onTap: controller.clickServiceAgreement,
                      ),
                      _buildDivider(),
                      _buildListItem(
                        StringName.childPrivacyPolicy,
                        onTap: controller.clickChildPrivacyPolicy,
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
        IgnorePointer(
          child: Assets.images.bgMine.image(
            width: 360.w,
            height: 206.h,
            fit: BoxFit.fill,
          ),
        ),
      ],
    );
  }

  Widget _buildListItem(String title, {required VoidCallback onTap}) {
    return InkWell(
      // 效果
      onTap: onTap,
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 20.w, vertical: 12.h),
        child: Row(
          children: [
            Text(
              title,
              style: TextStyle(
                fontSize: 14.sp,
                color: Colors.black.withAlpha(204),
              ),
            ),
            const Spacer(),
            Assets.images.iconAboutArrowLeft.image(width: 20.w, height: 20.w),
          ],
        ),
      ),
    );
  }

  //   列表的线
  Widget _buildDivider() {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 20.w),
      decoration: ShapeDecoration(
        shape: RoundedRectangleBorder(
          side: BorderSide(
            width: 1,
            strokeAlign: BorderSide.strokeAlignCenter,
            color: Color(0xFFF5F4F9),
          ),
        ),
      ),
    );
  }
}