import 'package:dating_touchme_app/components/page_appbar.dart';
import 'package:dating_touchme_app/router/route_paths.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:go_router/go_router.dart';

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

  @override
  State<EditInfoPage> createState() => _EditInfoPageState();
}

class _EditInfoPageState extends State<EditInfoPage> {

  int menuActive = 1;


  List<String> imgList = [
    "https://fastly.picsum.photos/id/64/800/800.jpg?hmac=NBZ4_-vqzD6p25oCeaW0H5vH-ql9zzei-SqJNeUo1QU",
    "https://fastly.picsum.photos/id/985/800/800.jpg?hmac=DfRt99HFbMJ96DlN-poOhruWYRsexESE94ilLC3g1rU",
    "https://fastly.picsum.photos/id/703/800/800.jpg?hmac=-bRTkPxnsiQ5kCo2tfXj6tFrXMD7YnVx7bQ0STno3Tg"
  ];

  int nowSelect = 0;

  List<String> tagList = [
    "北京", "160cm", "想要甜甜的恋爱", "本科", "朋友圈摄影师", "英雄联盟", "流放之路",
    "CF", "DNA", "堡垒之夜", "SCP"
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PageAppbar(title: "编辑资料"),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Row(
              children: [
                Expanded(
                  child: InkWell(
                    onTap: (){
                      menuActive = 1;
                      setState(() {

                      });
                    },
                    child: Container(
                      height: 98.w,
                      decoration: BoxDecoration(
                          border: Border(
                              bottom: BorderSide(
                                  width: 1,
                                  color: menuActive == 1 ? const Color.fromRGBO(117, 98, 249, 1) : const Color.fromRGBO(242, 242, 242, 1))
                          )
                      ),
                      child: Center(
                        child: Text(
                          "编辑",
                          style: TextStyle(
                              fontSize: 27.w,
                              color: menuActive == 1 ? const Color.fromRGBO(117, 98, 249, 1) : const Color.fromRGBO(144, 144, 144, 1)
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
                Expanded(
                  child: InkWell(
                    onTap: (){
                      menuActive = 2;
                      setState(() {

                      });
                    },
                    child: Container(
                      height: 98.w,
                      decoration: BoxDecoration(
                          border: Border(
                              bottom: BorderSide(
                                  width: 1,
                                  color: menuActive == 2 ? const Color.fromRGBO(117, 98, 249, 1) : const Color.fromRGBO(242, 242, 242, 1))
                          )
                      ),
                      child: Center(
                        child: Text(
                          "预览",
                          style: TextStyle(
                              fontSize: 27.w,
                              color: menuActive == 2 ? const Color.fromRGBO(117, 98, 249, 1) : const Color.fromRGBO(144, 144, 144, 1)
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
            if(menuActive == 1) ...[
              SizedBox(height: 52.w,),
              Stack(
                children: [
                  SizedBox(
                    child: ClipRRect(
                      borderRadius: BorderRadius.all(Radius.circular(170.w)),
                      child: Image.asset(
                        "assets/user_avatar.png",
                        width: 170.w,
                        height: 170.w,
                      ),
                    ),
                  ),
                  Positioned(
                    right: 17.w,
                    bottom: 2.w,
                    child: Image.asset(
                      "assets/edit_avatar.png",
                      width: 34.w,
                      height: 34.w,
                    ),
                  )
                ],
              ),
              SizedBox(height: 41.w,),
              Container(
                width: 750.w,
                padding: EdgeInsets.only(
                    left: 29.w,
                    right: 40.w
                ),
                child: Column(
                  children: [
                    Row(
                      children: [
                        Text(
                          "个人相册",
                          style: TextStyle(
                              fontSize: 26.w,
                              color: const Color.fromRGBO(144, 144, 144, 1)
                          ),
                        )
                      ],
                    ),
                    SizedBox(height: 10.w,),
                    Container(
                      width: 681.w,
                      margin: EdgeInsets.only(bottom: 70.w),
                      child: Wrap(
                        spacing: 10.w,
                        runSpacing: 10.w,
                        children: [
                          ClipRRect(
                            borderRadius: BorderRadius.all(Radius.circular(18.w)),
                            child: Image.network(
                              "https://fastly.picsum.photos/id/1003/400/400.jpg?hmac=aA6suLuxF9UGDuOSzWauxOJBgBT0XeUFVqMIIjO4hJU",
                              width: 141.w,
                              height: 141.w,
                            ),
                          ),
                          ClipRRect(
                            borderRadius: BorderRadius.all(Radius.circular(18.w)),
                            child: Image.network(
                              "https://fastly.picsum.photos/id/342/400/400.jpg?hmac=u_p3Kwp2J2A0XENzZfDKmtTzLjqsxLF48EUgImcL6v8",
                              width: 141.w,
                              height: 141.w,
                            ),
                          ),
                          ClipRRect(
                            borderRadius: BorderRadius.all(Radius.circular(18.w)),
                            child: Image.network(
                              "https://fastly.picsum.photos/id/935/400/400.jpg?hmac=d-_aU-UWnAMEk7lMRmhv-yD1sBBeSmiQ9fbTmcQqDT4",
                              width: 141.w,
                              height: 141.w,
                            ),
                          ),
                          Container(
                            width: 141.w,
                            height: 141.w,
                            decoration: BoxDecoration(
                                borderRadius: BorderRadius.all(Radius.circular(18.w)),
                                border: Border.all(width: 1, color: const Color.fromRGBO(224, 224, 224, 1))
                            ),
                            child: Center(
                              child: Icon(
                                Icons.add,
                                size: 30.w,
                                color: const Color.fromRGBO(144, 144, 144, 1),
                              ),
                            ),
                          )
                        ],
                      ),
                    ),
                    Row(
                      children: [
                        Text(
                          "基本信息",
                          style: TextStyle(
                              fontSize: 26.w,
                              color: const Color.fromRGBO(144, 144, 144, 1)
                          ),
                        )
                      ],
                    ),
                    SizedBox(height: 5.w,),
                    SetItem(label: "昵称",),
                    Container(
                      margin: EdgeInsets.only(bottom: 6.w),
                      decoration: BoxDecoration(
                          border: Border(
                              bottom: BorderSide(width: 1, color: const Color.fromRGBO(245, 245, 245, 1))
                          )
                      ),
                      child: Column(
                        children: [
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              RichText(
                                text: TextSpan(
                                    children: [
                                      TextSpan(
                                          text: "性别",
                                          style: TextStyle(
                                              fontSize: 26.w,
                                              color: const Color.fromRGBO(51, 51, 51, 1),
                                              fontWeight: FontWeight.w500
                                          )
                                      ),
                                    ]
                                ),
                              ),
                              Row(
                                children: [
                                  Text(
                                    "男",
                                    style: TextStyle(
                                        fontSize: 26.w,
                                        fontWeight: FontWeight.w500,
                                        color: const Color.fromRGBO(51, 51, 51, 1)
                                    ),
                                  ),
                                  SizedBox(width: 30.w,),
                                  Image.asset(
                                      "assets/male.png",
                                      width: 26.w,
                                      height: 26.w,
                                      color: const Color.fromRGBO(218, 218, 218, 1)
                                  )
                                ],
                              )

                            ],
                          ),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              RichText(
                                text: TextSpan(
                                    children: [
                                      TextSpan(
                                          text: "生日",
                                          style: TextStyle(
                                              fontSize: 26.w,
                                              color: const Color.fromRGBO(51, 51, 51, 1),
                                              fontWeight: FontWeight.w500
                                          )
                                      ),
                                      TextSpan(
                                          text: "*",
                                          style: TextStyle(
                                              fontSize: 26.w,
                                              color: const Color.fromRGBO(224, 54, 54, 1),
                                              fontWeight: FontWeight.w500
                                          )
                                      ),
                                    ]
                                ),
                              ),
                              Row(
                                children: [
                                  Text(
                                    "1989-06-30",
                                    style: TextStyle(
                                        fontSize: 26.w,
                                        fontWeight: FontWeight.w500,
                                        color: const Color.fromRGBO(51, 51, 51, 1)
                                    ),
                                  ),
                                  SizedBox(width: 30.w,),
                                  Icon(
                                      Icons.keyboard_arrow_right,
                                      size: 26.w,
                                      color: const Color.fromRGBO(191, 191, 191, 1)
                                  )
                                ],
                              )
                            ],
                          ),
                        ],
                      ),
                    ),
                    SetItem(label: "身高",),
                    SetItem(label: "所在地", showRequired: false,),
                    SetItem(label: "家乡",),
                    SetItem(label: "学历",),
                    SetItem(label: "职业",),
                    SetItem(label: "公司", showRequired: false,),
                    SetItem(label: "月收入",),
                    SetItem(label: "婚姻状况", showRequired: false,),
                    SetItem(label: "有无房产", showRequired: false,),
                    SizedBox(height: 16.w,),
                    InkWell(
                      onTap: (){
                        context.pushNamed(RouteNames.signature);
                      },
                      child: Column(
                        children: [
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text(
                                "交友心声",
                                style: TextStyle(
                                    fontSize: 26.w,
                                    color: const Color.fromRGBO(144, 144, 144, 1)
                                ),
                              ),
                              Icon(
                                  Icons.keyboard_arrow_right,
                                  size: 26.w,
                                  color: const Color.fromRGBO(191, 191, 191, 1)
                              )
                            ],
                          ),
                          Container(
                            margin: EdgeInsets.only(bottom: 6.w),
                            padding: EdgeInsets.only(bottom: 24.w),
                            decoration: BoxDecoration(
                                border: Border(
                                    bottom: BorderSide(width: 1, color: const Color.fromRGBO(245, 245, 245, 1))
                                )
                            ),
                            child: Text(
                              "拒绝内耗，向阳而生，用热爱抵御岁月漫长，用真诚对待每一次相遇拒绝内耗，向阳而生，用热爱抵御岁月漫长，用真诚对待每一次相遇",
                              style: TextStyle(
                                  fontSize: 26.w,
                                  fontWeight: FontWeight.w500,
                                  color: const Color.fromRGBO(51, 51, 51, 1)
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                    InkWell(
                      onTap: (){
                        context.pushNamed(RouteNames.tagSetting);
                      },
                      child: SetItem(label: "个性标签", showRequired: false,),
                    ),
                    SizedBox(height: 16.w,),
                    Row(
                      children: [
                        Text(
                          "交友范围",
                          style: TextStyle(
                              fontSize: 26.w,
                              color: const Color.fromRGBO(144, 144, 144, 1)
                          ),
                        )
                      ],
                    ),
                    SizedBox(height: 5.w,),
                    SetItem(label: "所在地", showRequired: false,),
                    SetItem(label: "年龄", showRequired: false,),
                    SetItem(label: "身高", showRequired: false,),
                    SetItem(label: "最低学历", showRequired: false,),
                    SetItem(label: "最低月收入", showRequired: false,),
                  ],
                ),
              ),
            ],
            if(menuActive  == 2) ...[
              Stack(
                children: [
                  Image.network(
                    imgList[nowSelect],
                    width: 750.w,
                    height: 769.w,
                    fit: BoxFit.cover,
                  ),
                  SingleChildScrollView(
                    child: Container(
                      padding: EdgeInsets.only(top: 723.w),
                      child: Container(
                        height: 1334.h - 723.w - 98.w - MediaQuery.of(context).padding.top - 108.w,
                        width: 750.w,
                        padding: EdgeInsets.only(
                            top: 62.w,
                            left: 31.w,
                            right: 48.w
                        ),
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.vertical(
                                top: Radius.circular(46.w)
                            ),
                            color: Colors.white
                        ),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Row(
                                  children: [
                                    Text(
                                      "晨晨子",
                                      style: TextStyle(
                                          fontSize: 38.w,
                                          color: const Color.fromRGBO(51, 51, 51, 1),
                                          fontWeight: FontWeight.w600
                                      ),
                                    ),
                                    SizedBox(width: 27.w,),
                                    Container(
                                      width: 66.w,
                                      height: 26.w,
                                      decoration: BoxDecoration(
                                          borderRadius: BorderRadius.all(Radius.circular(26.w)),
                                          color: const Color.fromRGBO(255, 237, 255, 1)
                                      ),
                                      child: Row(
                                        mainAxisAlignment: MainAxisAlignment.center,
                                        children: [
                                          Image.asset(
                                            "assets/female.png",
                                            width: 17.w,
                                            height: 17.w,
                                          ),
                                          SizedBox(width: 2.w,),
                                          Text(
                                            "19",
                                            style: TextStyle(
                                                fontSize: 18.w,
                                                color: const Color.fromRGBO(255, 66, 236, 1)
                                            ),
                                          )
                                        ],
                                      ),
                                    ),
                                    SizedBox(width: 6.w,),
                                    Container(
                                      width: 66.w,
                                      height: 26.w,
                                      margin: EdgeInsets.only(right: 5.w),
                                      decoration: BoxDecoration(
                                          borderRadius: BorderRadius.all(Radius.circular(26.w)),
                                          color: const Color.fromRGBO(234, 255, 219, 1)
                                      ),
                                      child: Center(
                                        child: Text(
                                          "在线",
                                          style: TextStyle(
                                              fontSize: 18.w,
                                              color: const Color.fromRGBO(38, 199, 124, 1)
                                          ),
                                        ),
                                      ),
                                    ),
                                    SizedBox(width: 8.w,),
                                    Container(
                                      width: 87.w,
                                      height: 26.w,
                                      decoration: BoxDecoration(
                                          borderRadius: BorderRadius.all(Radius.circular(26.w)),
                                          color: const Color.fromRGBO(246, 237, 255, 1)
                                      ),
                                      child: Row(
                                        mainAxisAlignment: MainAxisAlignment.center,
                                        children: [
                                          Image.asset(
                                            "assets/real_name.png",
                                            width: 16.w,
                                            height: 14.w,
                                          ),
                                          SizedBox(width: 5.w,),
                                          Text(
                                            "实名",
                                            style: TextStyle(
                                                fontSize: 18.w,
                                                color: const Color.fromRGBO(160, 92, 255, 1)
                                            ),
                                          )
                                        ],
                                      ),
                                    ),
                                    SizedBox(width: 8.w,),
                                    Container(
                                      width: 66.w,
                                      height: 26.w,
                                      decoration: BoxDecoration(
                                          borderRadius: BorderRadius.all(Radius.circular(26.w)),
                                          color: const Color.fromRGBO(237, 245, 255, 1)
                                      ),
                                      child: Row(
                                        mainAxisAlignment: MainAxisAlignment.center,
                                        children: [
                                          Image.asset(
                                            "assets/male.png",
                                            width: 17.w,
                                            height: 17.w,
                                          ),
                                          SizedBox(width: 2.w,),
                                          Text(
                                            "19",
                                            style: TextStyle(
                                                fontSize: 18.w,
                                                color: const Color.fromRGBO(120, 140, 255, 1)
                                            ),
                                          )
                                        ],
                                      ),
                                    ),
                                  ],
                                ),
                                Container(
                                  width: 127.w,
                                  height: 54.w,
                                  decoration: BoxDecoration(
                                      borderRadius: BorderRadius.all(Radius.circular(54.w)),
                                      color: const Color.fromRGBO(117, 98, 249, .1)
                                  ),
                                  child: Row(
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    children: [
                                      Image.asset(
                                        "assets/player.png",
                                        width: 31.w,
                                        height: 31.w,
                                      ),
                                      SizedBox(width: 8.w,),
                                      Image.asset(
                                        "assets/voice.png",
                                        width: 31.w,
                                        height: 27.w,
                                      ),
                                      SizedBox(width: 8.w,),
                                      Text(
                                        "6'",
                                        style: TextStyle(
                                            fontSize: 23.w,
                                            color: const Color.fromRGBO(117, 98, 249, 1)
                                        ),
                                      )
                                    ],
                                  ),
                                )
                              ],
                            ),
                            SizedBox(height: 16.w,),
                            Text(
                              "父母催婚找个结婚的",
                              style: TextStyle(
                                  fontSize: 23.w,
                                  color: const Color.fromRGBO(144, 144, 144, 1)
                              ),
                            ),
                            SizedBox(height: 23.w,),
                            Wrap(
                              spacing: 15.w,
                              runSpacing: 15.w,
                              children: [
                                ...tagList.map((e){
                                  return TagItem(label: e);
                                }),
                              ],
                            ),
                            SizedBox(height: 33.w,),
                            Text(
                              "IP属地：广东",
                              style: TextStyle(
                                  fontSize: 18.w,
                                  color: const Color.fromRGBO(144, 144, 144, 1)
                              ),
                            ),
                            Text(
                              "动我ID：16099665",
                              style: TextStyle(
                                  fontSize: 18.w,
                                  color: const Color.fromRGBO(144, 144, 144, 1)
                              ),
                            ),
                            Spacer(),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Container(
                                  width: 493.w,
                                  height: 76.w,
                                  decoration: BoxDecoration(
                                      borderRadius: BorderRadius.all(Radius.circular(76.w)),
                                      color: const Color.fromRGBO(51, 51, 51, 1)
                                  ),
                                  child: Row(
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    children: [
                                      Image.asset(
                                        "assets/chat_btn.png",
                                        width: 26.w,
                                        height: 24.w,
                                      ),
                                      SizedBox(width: 8.w,),
                                      Text(
                                        "发消息",
                                        style: TextStyle(
                                            fontSize: 31.w,
                                            color: Colors.white,
                                            fontWeight: FontWeight.w500
                                        ),
                                      )
                                    ],
                                  ),
                                ),
                                Container(
                                  width: 162.w,
                                  height: 76.w,
                                  decoration: BoxDecoration(
                                      borderRadius: BorderRadius.all(Radius.circular(76.w)),
                                      color: const Color.fromRGBO(117, 98, 249, 1)
                                  ),
                                  child: Center(
                                    child: Text(
                                      "关注",
                                      style: TextStyle(
                                          fontSize: 31.w,
                                          color: Colors.white,
                                          fontWeight: FontWeight.w500
                                      ),
                                    ),
                                  ),
                                ),
                              ],
                            )
                          ],
                        ),
                      ),
                    ),
                  ),
                  Positioned(
                    left: 31.w,
                    top: 627.w,
                    child: Row(
                      children: [
                        ...imgList.asMap().entries.map((entry){
                          return Container(
                            margin: EdgeInsets.only(right: 15.w),
                            child: InkWell(
                              onTap: (){
                                nowSelect = entry.key;
                                setState(() {

                                });
                              },
                              child: ClipRRect(
                                borderRadius: BorderRadius.all(Radius.circular(15.w)),
                                child: Container(
                                  width: 81.w,
                                  height: 81.w,
                                  decoration: BoxDecoration(
                                      borderRadius: BorderRadius.all(Radius.circular(15.w)),
                                      border: nowSelect == entry.key ? Border.all(width: 2.w, color: Colors.white) : null
                                  ),
                                  child: Center(
                                    child: Image.network(
                                      entry.value,
                                      width: 77.w,
                                      height: 77.w,
                                    ),
                                  ),
                                ),
                              ),
                            ),
                          );
                        }),
                      ],
                    ),
                  ),
                ],
              )
            ]
          ],
        ),
      ),
    );
  }
}

class SetItem extends StatefulWidget {
  final String label;
  final bool showRequired;
  const SetItem({super.key, required this.label, this.showRequired = true});

  @override
  State<SetItem> createState() => _SetItemState();
}

class _SetItemState extends State<SetItem> {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(bottom: 6.w),
      decoration: BoxDecoration(
        border: Border(
          bottom: BorderSide(width: 1, color: const Color.fromRGBO(245, 245, 245, 1))
        )
      ),
      child: InkWell(
        child: SizedBox(
          height: 83.w,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              RichText(
                text: TextSpan(
                  children: [
                    TextSpan(
                      text: widget.label,
                      style: TextStyle(
                        fontSize: 26.w,
                        color: const Color.fromRGBO(51, 51, 51, 1),
                        fontWeight: FontWeight.w500
                      )
                    ),
                    if(widget.showRequired) TextSpan(
                        text: "*",
                        style: TextStyle(
                            fontSize: 26.w,
                            color: const Color.fromRGBO(224, 54, 54, 1),
                            fontWeight: FontWeight.w500
                        )
                    ),
                  ]
                ),
              ),
              Row(
                children: [
                  Text(
                    "未选择",
                    style: TextStyle(
                      fontSize: 26.w,
                      color: const Color.fromRGBO(191, 191, 191, 1)
                    ),
                  ),
                  SizedBox(width: 30.w,),
                  Icon(
                      Icons.keyboard_arrow_right,
                      size: 26.w,
                      color: const Color.fromRGBO(191, 191, 191, 1)
                  )
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}


class TagItem extends StatelessWidget {
  final String label;
  const TagItem({super.key, required this.label});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(
          vertical: 4.w,
          horizontal: 12.w
      ),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(27.w)),
          color: const Color.fromRGBO(245, 247, 255, 1)
      ),
      child: Text(
        label,
        style: TextStyle(
            fontSize: 23.w,
            color: const Color.fromRGBO(51, 51, 51, 1)
        ),
      ),
    );
  }
}