import 'package:dating_touchme_app/components/home_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 ChatPage extends StatefulWidget {
  const ChatPage({super.key});

  @override
  State<ChatPage> createState() => _ChatPageState();
}

class _ChatPageState extends State<ChatPage> {


  List<String> topNav = ["聊天", "好友"];

  List<Map> chatList = [
    {"id": 0,"avatar": "assets/system_notifi.png", "isOnline": false, "userName": "系统通知", "messageNum": 2, "lastMessage": "在干嘛"},
    {"id": 1,"avatar": "assets/user_avatar.png", "isOnline": true, "userName": "林园园", "messageNum": 2, "lastMessage": "在干嘛"},
    {"id": 1,"avatar": "assets/user_avatar.png", "isOnline": false, "userName": "李晖", "messageNum": 0, "lastMessage": "好的"},
    {"id": 1,"avatar": "assets/user_avatar.png", "isOnline": false, "userName": "李哲", "messageNum": 0, "lastMessage": "在干嘛"},
    {"id": 1,"avatar": "assets/user_avatar.png", "isOnline": false, "userName": "李夏", "messageNum": 0, "lastMessage": "在干嘛"},
  ];

  List<Map> topList = [
    {"isFriend": false},
    {"isFriend": true},
    {"isFriend": false},
    {"isFriend": false},
    {"isFriend": false},
    {"isFriend": true},
    {"isFriend": false},
    {"isFriend": false},
    {"isFriend": false},
    {"isFriend": true},
    {"isFriend": false},
    {"isFriend": false},
  ];

  int nowActive = 0;

  List<String> friendNavList = ["我的关注", "好友", "粉丝"];

  int friendNavActive = 0;

  void changeNav(int active) {
    print("当前项: $active");
    nowActive = active;
    setState(() {

    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      constraints: BoxConstraints(minHeight: ScreenUtil().setHeight(1220)),
      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: [
          Container(
            padding: EdgeInsets.symmetric(horizontal: 36.w),
            child: HomeAppbar(topNav: topNav, changeNav: changeNav, right: InkWell(
              onTap: (){
                print("12121");
              },
              child: Image.asset(
                "assets/search.png",
                width: 29.w,
                height: 31.w,
              ),
            ),),
          ),
          if(nowActive == 0) ... [
            Container(
              width: 750.w,
              padding: EdgeInsets.only(
                  top: 5.w,
                  bottom: 46.w
              ),
              child: SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    SizedBox(width: 11.w,),
                    ...topList.map((e){
                      return TopItem(item: e);
                    }),
                  ],
                ),
              ),
            ),
            Container(
              padding: EdgeInsets.symmetric(horizontal: 31.w),
              child: Column(
                children: [
                  ...chatList.map((e){
                    return ChatItem(item: e);
                  }),
                ],
              ),
            )
          ],
          if(nowActive == 1) ...[
            Container(
              padding: EdgeInsets.symmetric(horizontal: 25.w),
              margin: EdgeInsets.only(bottom: 35.w),
              child: Row(
                children: [
                  ...friendNavList.asMap().entries.map((entry){
                    return Container(
                      margin: EdgeInsets.only(right: 50.w),
                      child: InkWell(
                        onTap: (){
                          friendNavActive = entry.key;
                          setState(() {

                          });
                        },
                        child: Container(
                          padding: entry.key == friendNavActive ? EdgeInsets.symmetric(vertical: 5.w, horizontal: 26.w) : EdgeInsets.zero,
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.all(Radius.circular(43.w)),
                              color: entry.key == friendNavActive ? const Color.fromRGBO(117, 98, 249, 1) : Colors.transparent
                          ),
                          child: Text(
                            entry.value,
                            style: TextStyle(
                                fontSize: 24.w,
                                color: entry.key == friendNavActive ? Colors.white : const Color.fromRGBO(51, 51, 51, .7),
                                fontWeight: entry.key == friendNavActive ? FontWeight.w700 : FontWeight.w500
                            ),
                          ),
                        ),
                      ),
                    );
                  }),

                ],
              ),
            ),
            if(friendNavActive == 0) ...[
              FriendItem(),
              FriendItem(),
              FriendItem(),
              FriendItem(),
            ],
            if(friendNavActive != 0) Column(
              children: [
                SizedBox(height: 100.w,),
                Image.asset(
                  "assets/no_chat_bg.png",
                  width: 182.w,
                  height: 182.w,
                ),
                SizedBox(height: 27..w,),
                Text(
                  "你还没有关注任何人噢",
                  style: TextStyle(
                    fontSize: 25.w,
                    color: const Color.fromRGBO(144, 144, 144, 1),
                    fontWeight: FontWeight.w500
                  ),
                ),
                SizedBox(height: 22..w,),
                Container(
                  width: 302.w,
                  height: 65.w,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(65.w)),
                    color: const Color.fromRGBO(117, 98, 249, 1),
                  ),
                  child: Center(
                    child: Text(
                      "去聊聊",
                      style: TextStyle(
                        fontSize: 25.w,
                        color: Colors.white,
                        fontWeight: FontWeight.w500
                      ),
                    ),
                  ),
                )
              ],
            )
          ]
        ],
      ),
    );
  }
}

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

  @override
  State<ChatItem> createState() => _ChatItemState();
}

class _ChatItemState extends State<ChatItem> {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(bottom: 15.w),
      child: InkWell(
        onTap: (){
          if(widget.item["id"] == 0){
            context.pushNamed(RouteNames.notify);
          } else {
            context.pushNamed(RouteNames.message);
          }
        },
        child: Container(
          padding: EdgeInsets.symmetric(vertical: 15.w),
          child: Row(
            children: [
              Stack(
                children: [
                  ClipRRect(
                    borderRadius: BorderRadius.all(Radius.circular(92.w)),
                    child: Image.asset(
                      widget.item["avatar"],
                      width: 92.w,
                      height: 92.w,
                    ),
                  ),
                  if(widget.item["isOnline"]) Positioned(
                    right: 0,
                    bottom: 0,
                    child: Container(
                      width: 22.w,
                      height: 22.w,
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(22.w)),
                          color: const Color.fromRGBO(43, 255, 132, 1)
                      ),
                    ),
                  ),
                ],
              ),
              SizedBox(width: 17.w,),
              SizedBox(
                width: 578.w,
                child: Column(
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          widget.item["userName"],
                          style: TextStyle(
                              fontSize: 27.w,
                              color: const Color.fromRGBO(51, 51, 51, 1),
                              fontWeight: FontWeight.w500
                          ),
                        ),
                        Text(
                          "19.24",
                          style: TextStyle(
                            fontSize: 23.w,
                            color: const Color.fromRGBO(51, 51, 51, .6),
                          ),
                        )
                      ],
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          widget.item["lastMessage"],
                          style: TextStyle(
                            fontSize: 23.w,
                            color: const Color.fromRGBO(51, 51, 51, .6),
                          ),
                        ),
                        if(widget.item["messageNum"] > 0) Container(
                          width: 38.w,
                          height: 38.w,
                          margin: EdgeInsets.only(right: 9.w),
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.all(Radius.circular(38.w)),
                              color: const Color.fromRGBO(255, 87, 51, 1)
                          ),
                          child: Center(
                            child: Text(
                              "${widget.item["messageNum"]}",
                              style: TextStyle(
                                  fontSize: 23.w,
                                  color: Colors.white
                              ),
                            ),
                          ),
                        )
                      ],
                    )
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

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

  @override
  State<TopItem> createState() => _TopItemState();
}

class _TopItemState extends State<TopItem> {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 16.w),
      child: Stack(
        children: [
          SizedBox(
            width: 101.w,
            height: 101.w,
            child: ClipRRect(
              borderRadius: BorderRadius.all(Radius.circular(101.w)),
              child: Container(
                padding: EdgeInsets.all(4.w),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(101.w)),
                    border: Border.all(width: 1, color: widget.item["isFriend"] ? const Color.fromRGBO(115, 143, 255, 1) : const Color.fromRGBO(255, 115, 164, 1))
                ),
                child: Image.asset(
                  "assets/user_avatar.png",
                  width: 92.w,
                  height: 92.w,
                ),
              ),
            ),
          ),
          if(!widget.item["isFriend"]) Positioned(
            bottom: 0,
            left: 13.w,
            child: Container(
              width: 76.w,
              height: 24.w,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(24.w)),
                color: const Color.fromRGBO(255, 115, 164, 1)
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Image.asset(
                    "assets/blind_data.png",
                    width: 19.w,
                    height: 16.w,
                  ),
                  SizedBox(width: 4.w,),
                  Text(
                    "相亲",
                    style: TextStyle(
                      fontSize: 16.w,
                      color: Colors.white,
                      fontWeight: FontWeight.w500
                    ),
                  )
                ],
              ),
            ),
          ),
          if(widget.item["isFriend"]) Positioned(
            bottom: 0,
            left: 13.w,
            child: Container(
              width: 76.w,
              height: 24.w,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(24.w)),
                  color: const Color.fromRGBO(115, 143, 255, 1)
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Image.asset(
                    "assets/make_friend.png",
                    width: 20.w,
                    height: 16.w,
                  ),
                  SizedBox(width: 4.w,),
                  Text(
                    "交友",
                    style: TextStyle(
                        fontSize: 16.w,
                        color: Colors.white,
                        fontWeight: FontWeight.w500
                    ),
                  )
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

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

  @override
  State<FriendItem> createState() => _FriendItemState();
}

class _FriendItemState extends State<FriendItem> {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 25.w),
      margin: EdgeInsets.only(bottom: 30.w),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Row(
            children: [
              Image.asset(
                "assets/user_avatar.png",
                width: 90.w,
                height: 90.w,
              ),
              SizedBox(width: 18.w,),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    children: [
                      Text(
                        "叫我大王",
                        style: TextStyle(
                            fontSize: 28.w,
                            color: const Color.fromRGBO(51, 51, 51, 1),
                            fontWeight: FontWeight.w500
                        ),
                      ),
                      SizedBox(width: 14.w,),
                      Container(
                        width: 24.w,
                        height: 24.w,
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.all(Radius.circular(24.w)),
                            color: true ? const Color.fromRGBO(237, 245, 255, 1) : const Color.fromRGBO(255, 237, 255, 1)
                        ),
                        child: Center(
                          child: Image.asset(
                            true ? "assets/male.png" : "assets/female.png",
                            width: 14.w,
                          ),
                        ),
                      )
                    ],
                  ),
                  Text(
                    "30岁·广州",
                    style: TextStyle(
                      fontSize: 22.w,
                      color: const Color.fromRGBO(144, 144, 144, 1),
                      fontWeight: FontWeight.w500
                    ),
                  )
                ],
              )
            ],
          ),
          Container(
            width: 129.w,
            height: 45.w,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(45.w)),
              color: const Color.fromRGBO(224, 224, 224, 1)
            ),
            child: Center(
              child: Text(
                "已关注",
                style: TextStyle(
                  fontSize: 22.w,
                  color: const Color.fromRGBO(144, 144, 144, 1),
                  fontWeight: FontWeight.w500
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}