import 'package:dating_touchme_app/controller/mine/mine_controller.dart';
import 'package:dating_touchme_app/pages/mine/edit_info_page.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:dating_touchme_app/generated/assets.dart';
import 'package:get/get.dart';
import 'package:get_storage/get_storage.dart';

import '../../extension/router_service.dart';

class MinePage extends StatefulWidget {
  const MinePage({super.key});

  @override
  State<MinePage> createState() => _MinePageState();
}

class _MinePageState extends State<MinePage> with AutomaticKeepAliveClientMixin{


  final MineController ctrl = Get.put(MineController());
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 9.w),
      constraints: BoxConstraints(minHeight: ScreenUtil().setHeight(800)),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [
            Color.fromRGBO(248, 242, 255, 1.0), // rgba(248, 242, 255, 1)
            Color.fromRGBO(247, 247, 247, 1.0), // rgba(247, 247, 247, 1)
          ],
          stops: [0.0, 1.0],
        ),
      ),
      child: Column(
        children: [
          SizedBox(
            height: MediaQuery.of(context).padding.top + 54.w,
          ),
          Container(
            width: 356.w,
            padding: EdgeInsets.only(
                left: 6.w,
                right: 5.w
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Row(
                  children: [
                    Image.asset(
                      Assets.imagesUserAvatar,
                      width: 60.w,
                      height: 60.w,
                    ),
                    SizedBox(width: 14.w,),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Row(
                          children: [
                            Text(
                              "用户昵称",
                              style: TextStyle(
                                  fontSize: 18.w,
                                  color: const Color.fromRGBO(51, 51, 51, 1),
                                  fontWeight: FontWeight.w700
                              ),
                            ),
                            SizedBox(width: 8.w,),
                            Image.asset(
                              Assets.imagesVip,
                              width: 44.w,
                              height: 16.w,
                            )
                          ],
                        ),
                        SizedBox(height: 11.w,),
                        Text(
                          "ID：4654654565",
                          style: TextStyle(
                              fontSize: 12.w,
                              color: const Color.fromRGBO(51, 51, 51, 1),
                              fontWeight: FontWeight.w500
                          ),
                        )
                      ],
                    )
                  ],
                ),
                InkWell(
                  onTap: (){
                    Get.to(() => EditInfoPage());
                  },
                  child: Row(
                    children: [
                      Image.asset(
                        Assets.imagesEdit,
                        width: 10.w,
                        height: 10.w,
                      ),
                      SizedBox(width: 4.w,),
                      Text(
                        "编辑资料",
                        style: TextStyle(
                            fontSize: 12.w,
                            color: const Color.fromRGBO(55, 57, 72, 1),
                            fontWeight: FontWeight.w500
                        ),
                      )
                    ],
                  ),
                )
              ],
            ),
          ),
          SizedBox(height: 16.w,),
          Container(
            height: 57.w,
            padding: EdgeInsets.only(
                top: 11.w,
                right: 37.w,
                bottom: 8.w,
                left: 27.w
            ),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(9.w)),
              color: Colors.white,
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                ...ctrl.infoList.map((e){
                  return InfoItem(item: e);
                }),
              ],
            ),
          ),
          SizedBox(height: 12.w,),
          Stack(
            children: [
              Image.asset(
                Assets.imagesVipBanner,
                width: 356.w,
                height: 64.w,
              ),
              Positioned(
                top: 18.w,
                right: 15.w,
                child: InkWell(
                  child: SizedBox(
                    width: 73.w,
                    height: 28.w,
                  ),
                ),
              )
            ],
          ),
          SizedBox(height: 12.w,),
          Wrap(
            spacing: 8.w,
            runSpacing: 8.w,
            children: [
              ...ctrl.blockList.map((e){
                return BlockItem(item: e, showWaring: e["title"] == "认证中心", path: e["path"],);
              }),
            ],
          ),
          SizedBox(height: 12.w,),
          ...ctrl.settingList.map((e){
            return SettingItem(item: e);
          }),
        ],
      ),
    );
  }


  @override
  // TODO: implement wantKeepAlive
  bool get wantKeepAlive => true;
}







class InfoItem extends StatefulWidget {
  final Map item;
  const InfoItem({super.key, required this.item});

  @override
  State<InfoItem> createState() => _InfoItemState();
}

class _InfoItemState extends State<InfoItem> {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(
          "${widget.item["num"]}",
          style: TextStyle(
              fontSize: 15.w,
              color: Colors.black,
              fontWeight: FontWeight.w700
          ),
        ),
        Text(
          widget.item["label"],
          style: TextStyle(
            fontSize: 10.w,
            color: const Color.fromRGBO(166, 166, 166, 1),
          ),
        )
      ],
    );
  }
}

class BlockItem extends StatefulWidget {
  final Map item;
  final bool showWaring;
  final Function path;
  const BlockItem({super.key, required this.item, this.showWaring = false, required this.path});

  @override
  State<BlockItem> createState() => _BlockItemState();
}

class _BlockItemState extends State<BlockItem> {
  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: (){
        // context.pushNamed(widget.path);
        Get.to(widget.path);
        // RouteGuardService.to.toWithAuth(widget.path, null);
      },
      child: Container(
        width: 170.w,
        height: 38.w,
        padding: EdgeInsets.symmetric(horizontal: 7.w),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(9.w)),
            color: Colors.white
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Row(
              children: [
                Image.asset(
                  widget.item["icon"],
                  width: 21.w,
                  height: 21.w,
                ),
                SizedBox(width: 2.w,),
                Text(
                  widget.item["title"],
                  style: TextStyle(
                    fontSize: 12.w,
                    color: Colors.black,
                  ),
                )
              ],
            ),
            Row(
              children: [
                if(widget.showWaring) Container(
                  width: 5.w,
                  height: 5.w,
                  margin: EdgeInsets.only(right: 4.w),
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(5.w)),
                      color: const Color.fromRGBO(255, 87, 51, 1)
                  ),
                ),
                Text(
                  widget.item["subTitle"],
                  style: TextStyle(
                      fontSize: 9.w,
                      color: const Color.fromRGBO(166, 166, 166, 1)
                  ),
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}

class SettingItem extends StatefulWidget {
  final Map item;
  const SettingItem({super.key, required this.item});

  @override
  State<SettingItem> createState() => _SettingItemState();
}

class _SettingItemState extends State<SettingItem> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 48.w,
      padding: EdgeInsets.symmetric(horizontal: 16.w),
      color: Colors.white,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Row(
            children: [
              Image.asset(
                widget.item["icon"],
                width: 24.w,
                height: 24.w,
              ),
              SizedBox(width: 4.w,),
              Text(
                widget.item["title"],
                style: TextStyle(
                    fontSize: 14.w,
                    fontWeight: FontWeight.w500,
                    color: Colors.black
                ),
              )
            ],
          ),
          Image.asset(
            Assets.imagesArrow,
            width: 4.w,
            height: 8.w,
          )
        ],
      ),
    );
  }
}