import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:keyboard/base/base_view.dart';
import 'package:keyboard/module/mine/mine_controller.dart';
import 'package:keyboard/resource/string.gen.dart';

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

class MineView extends BaseView<MineController> {
  const MineView({super.key});

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

  @override
  Widget buildBody(BuildContext context) {
    return Stack(
      children: [
        SafeArea(
          child: SingleChildScrollView(
            child: Column(children: [heardCard(), functionCard()]),
          ),
        ),
        IgnorePointer(child: Assets.images.bgMine.image(width: 360.w)),
      ],
    );
  }

  Widget heardCard() {
    return Container(
      margin: EdgeInsets.only(top: 36.w, left: 16.w, right: 16.w),
      child: Column(children: [userCard(), vipCard()]),
    );
  }

  // 更多功能
  Widget functionCard() {
    return Container(
      padding: EdgeInsets.only(top: 18.w, left: 16.w, right: 16.w, bottom: 6.w),
      margin: EdgeInsets.only(top: 12.w, left: 16.w, right: 16.w),
      width: 328.w,
      // height: 348.h,
      decoration: ShapeDecoration(
        color: Colors.white,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(12.r),
        ),
      ),
      child: Column(
        children: [
          baseFunctionButton(
            text: StringName.onlineCustomerService,
            funIcon: Assets.images.iconMineOnlineCustomerService.path,
            onTap: controller.clickOnlineCustomerService,
          ),

          baseFunctionButton(
            text: StringName.tutorials,
            funIcon: Assets.images.iconMineTutorials.path,
            onTap: controller.clickTutorials,
          ),

          baseFunctionButton(
            text: StringName.personalProfile,
            funIcon: Assets.images.iconMinePersonalProfile.path,
            onTap: controller.clickPersonalProfile,
          ),

          baseFunctionButton(
            text: StringName.feedback,
            funIcon: Assets.images.iconMineFeedback.path,
            onTap: controller.clickFeedback,
          ),

          baseFunctionButton(
            text: StringName.aboutUs,
            funIcon: Assets.images.iconMineAbout.path,
            onTap: controller.clickAboutUs,
          ),
        ],
      ),
    );
  }

  // 用户信息卡片
  Widget userCard() {
    return Row(
      children: [
        controller.isLogin
            ? Assets.images.iconMineUserLogged.image(width: 56.r, height: 56.r)
            : Assets.images.iconMineUserNoLogin.image(
              width: 56.r,
              height: 56.r,
            ),
        SizedBox(width: 12.r),
        Text(
          controller.getUserName(),
          style: TextStyle(
            fontSize: 18.sp,
            color: Colors.black,
            fontWeight: FontWeight.w500,
          ),
        ),

        SizedBox(width: 4.r),

        Assets.images.iconMineLoginArrow.image(width: 16.r, height: 16.r),
      ],
    );
  }

  // VIP 卡片
  Widget vipCard() {
    return Container(
      margin: EdgeInsets.only(top: 21.w),
      width: 326.w,
      height: 79.w,
      decoration: ShapeDecoration(
        image: DecorationImage(
          image: Assets.images.bgMineVipCard.provider(),
          fit: BoxFit.cover,
        ),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(11.r),
        ),
      ),
      child: GestureDetector(
        behavior: HitTestBehavior.opaque,
        onTap: controller.clickVip,
        child: Container(
          padding: EdgeInsets.only(left: 15.w, right: 15.w),
          width: 326.w,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  // vip 图标
                  Assets.images.iconMineVip.image(width: 62.w, height: 19.h),
                  // vip描述文本
                  Row(
                    children: [
                      Text(
                        StringName.vipLevel0Desc,
                        style: TextStyle(
                          color: Color(0xFFE4B483),
                          fontSize: 12.sp,
                          fontWeight: FontWeight.w400,
                        ),
                      ),
                      Assets.images.iconMineVipDescArrow.image(
                        width: 16.w,
                        height: 16.h,
                      ),
                    ],
                  ),
                ],
              ),
              // VIP按钮
              Container(
                alignment: Alignment.center,
                width: 80.w,
                height: 28.h,
                decoration: ShapeDecoration(
                  gradient: LinearGradient(
                    begin: Alignment(-0.94.r, 0.35.r),
                    end: Alignment(0.94.r, -0.35.r),
                    colors: [
                      Color(0xFFFFD79C),
                      Color(0xFFF19F45),
                      Color(0xFFF19F45),
                      Color(0xFFFFC387),
                    ],
                  ),
                  shape: RoundedRectangleBorder(
                    side: BorderSide(width: 1.w, color: Color(0xFFEA973E)),
                    borderRadius: BorderRadius.circular(32.r),
                  ),
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      StringName.vipLevel0Btn,
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 13.sp,
                        fontWeight: FontWeight.w400,
                      ),
                    ),
                    Assets.images.iconMineVipArrow.image(
                      width: 10.w,
                      height: 10.w,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  // 基础设置按钮
  Widget baseSettingButton({
    required String text,
    required Widget btnIcon,
    required VoidCallback onTap,
  }) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        width: 158.w,
        height: 44.h,
        decoration: ShapeDecoration(
          color: Colors.white,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10.r),
          ),
        ),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            btnIcon,
            SizedBox(width: 8.w),
            Text(
              text,
              style: TextStyle(
                color: Colors.black,
                fontSize: 14.sp,
                fontWeight: FontWeight.w500,
              ),
            ),
          ],
        ),
      ),
    );
  }

  //基础功能按钮
  Widget baseFunctionButton({
    required String text,
    required String funIcon,
    required VoidCallback onTap,
  }) {
    return GestureDetector(
      onTap: onTap,
      behavior: HitTestBehavior.opaque,
      child: Padding(
        padding: EdgeInsets.only(bottom: 12.h),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.asset(funIcon, width: 24.w, height: 24.w),
            SizedBox(width: 10.w),
            Text(
              text,
              style: TextStyle(
                color: Colors.black,
                fontSize: 14.sp,
                fontWeight: FontWeight.w400,
              ),
            ),
            Spacer(),
            Assets.images.iconMineArrow.image(width: 20.w, height: 20.w),
          ],
        ),
      ),
    );
  }
}
