import 'package:dating_touchme_app/components/page_appbar.dart';
import 'package:dating_touchme_app/generated/assets.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

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

  @override
  State<VipPage> createState() => _VipPageState();
}

class _VipPageState extends State<VipPage> {


  bool checked = false;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned(
          child: Container(
            width: 375.w,
            height: 812.h,
            color: Colors.white,
          ),
        ),
        Positioned(
          left: 0,
          top: -200,
          child: Image.asset(
            Assets.imagesVipBg,
            width: 561.w,
            height: 1120.w,
            fit: BoxFit.cover,
          ),
        ),
        Scaffold(
          appBar: PageAppbar(
            title: "会员中心",
            backgroundColor: Colors.transparent,
            right:  Container(
              margin: EdgeInsets.only(
                right: 18.w
              ),
              child: InkWell(
                onTap: (){
                  print("12121");
                },
                child: Image.asset(
                  Assets.imagesSettingIcon,
                  width: 17.w,
                ),
              ),
            ),),
          backgroundColor: Colors.transparent,
          body: SingleChildScrollView(
            child: Column(
              children: [
                Container(
                  padding: EdgeInsets.only(
                    top: 20.w,
                    left: 15.w
                  ),
                  child:
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween ,
                    children: [
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Row(
                            children: [
                              Image.asset(
                                Assets.imagesUserAvatar,
                                width: 60.w,
                                height: 60.w,
                              ),
                              SizedBox(width: 15.w,),
                              Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text(
                                    "用户昵称",
                                    style: TextStyle(
                                      fontSize: 18.w,
                                      fontWeight: FontWeight.w700
                                    ),
                                  ),
                                  SizedBox(height: 6.w,),
                                  Container(
                                    width: 32.w,
                                    height: 16.w,
                                    decoration: BoxDecoration(
                                      borderRadius: BorderRadius.all(Radius.circular(16.w)),
                                      color: const Color.fromRGBO(201, 201, 201, 1)
                                    ),
                                    child: Center(
                                      child: Image.asset(
                                        Assets.imagesVipFont,
                                        width: 20.w,
                                        height: 8.w,
                                      ),
                                    ),
                                  )
                                ],
                              )
                            ],
                          ),
                          SizedBox(height: 29.w,),
                          Text(
                            "开通 动我vip 畅享尊贵特权~",
                            style: TextStyle(
                              fontSize: 11.w,
                              color: const Color.fromRGBO(144, 144, 144, 1 )
                            ),
                          )
                        ],
                      ),
                      Image.asset(
                        Assets.imagesVipImg,
                        width: 158.w,
                        height: 179.w,
                      )
                    ],
                  ),
                )
              ],
            ),
          ),
        ),
        Positioned(
          top: 270.w,
          left: 0,
          child: Material(
            child: Container(
              width: 375.w,
              height: 821.h - 270.w,
              padding: EdgeInsetsGeometry.symmetric(
                vertical: 22.w,
                horizontal: 13.w
              ),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.vertical(
                  top: Radius.circular(18.w)
                ),
                color: Colors.white
              ),
              child: Column(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      VipItem(),
                      VipItem(),
                      VipItem(),
                    ],
                  ),
                  SizedBox(height: 12.w,),
                  Row(
                    children: [

                      Checkbox(
                        value: checked,
                        onChanged: (value) {
                          checked = value ?? false;
                          setState(() {

                          });
                        },
                        activeColor: const Color.fromRGBO(117, 98, 249, 1),
                        side: const BorderSide(color: Colors.grey),
                        shape: const CircleBorder(),
                        materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                      ),
                      Text(
                        "我已阅读并同意《会员购买协议》",
                        style: TextStyle(
                          fontSize: 11.w,
                          color: const Color.fromRGBO(189, 189, 189, 1)
                        ),
                      )
                    ],
                  ),
                  SizedBox(height: 25.w,),
                  Row(
                    children: [
                      Text(
                        "会员专属特权",
                        style: TextStyle(
                          fontSize: 17.w,
                          fontWeight: FontWeight.w500,
                          color: const Color.fromRGBO(54, 0, 115, 1)
                        ),
                      )
                    ],
                  ),
                  SizedBox(height: 18.w,),
                  Container(
                    padding: EdgeInsets.symmetric(
                      horizontal: 18.w
                    ),
                    child: Row(
                      children: [
                        
                      ],
                    ),
                  )
                ],
              ),
            ),
          ),
        )
      ],
    );
  }
}

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

  @override
  State<VipItem> createState() => _VipItemState();
}

class _VipItemState extends State<VipItem> {
  @override
  Widget build(BuildContext context) {
    return
      Container(
        width: 111.w,
        height: 117.w,
        padding: EdgeInsets.only(
          top: 16.w,
          bottom: 21.w
        ),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(18.w)),
            border: Border.all(width: 1, color: Color.fromRGBO(222, 222, 222, 1))
        ),
        child: Column(
          children: [
            Text(
              "3个月",
              style: TextStyle(
                fontSize: 11.w,
                fontWeight: FontWeight.w700
              ),
            ),
            SizedBox(height: 2.w,),
            Text(
              "￥29.3/月",
              style: TextStyle(
                fontSize: 11.w,
                color: const Color.fromRGBO(144, 144, 144, 1)
              ),
            ),
            SizedBox(height: 23.w,),
            RichText(
              text: TextSpan(
                style: TextStyle(
                  color: const Color.fromRGBO(248, 85, 66, 1),
                  fontWeight: FontWeight.w700
                ),
                children: [
                  TextSpan(
                    text: "￥",
                    style: TextStyle(
                      fontSize: 12.w
                    )
                  ),
                  TextSpan(
                      text: "88",
                      style: TextStyle(
                          fontSize: 18.w
                      )
                  ),
                ]
              ),
            )
          ],
        ),
      );
  }
}

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

  @override
  State<VipPrivilege> createState() => _VipPrivilegeState();
}

class _VipPrivilegeState extends State<VipPrivilege> {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Image.asset(
          Assets.imagesWallet
        )
      ],
    );
  }
}