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;

  @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)
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
            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)
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                  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,),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

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)
                  )
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}