import 'package:dating_touchme_app/components/home_appbar.dart';
import 'package:dating_touchme_app/controller/discover/room_controller.dart';
import 'package:dating_touchme_app/generated/assets.dart';
import 'package:dating_touchme_app/pages/discover/live_room_page.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

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

  @override
  State<DiscoverPage> createState() => _DiscoverPageState();
}

class _DiscoverPageState extends State<DiscoverPage> with AutomaticKeepAliveClientMixin{
  late final RoomController roomController;

  List<String> topNav = ["相亲", "聚会脱单"];

  List<Map> liveList = [
    {"isNew": true},
    {"isNew": true},
    {"isNew": false},
    {"isNew": false},
    {"isNew": false},
    {"isNew": false},
    {"isNew": false},
    {"isNew": false},
    {"isNew": false},
    {"isNew": false},
  ];

  List<String> tabList = [
    "全部", "同城", "相亲视频", "相亲语音"
  ];

  int active = 0;


  void changeNav(int active) {
    print("当前项: $active");
  }

  @override
  void initState() {
    super.initState();
    if (Get.isRegistered<RoomController>()) {
      roomController = Get.find<RoomController>();
    } else {
      roomController = Get.put(RoomController());
    }
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Stack(
      children: [
        Image.asset(
          Assets.imagesBgInformation,
          fit: BoxFit.cover,
          width: double.infinity,
          height: double.infinity,
        ),
        Container(
          padding: EdgeInsets.symmetric(horizontal: 12.w),
          constraints: BoxConstraints(minHeight: ScreenUtil().setHeight(800)),

          child: Column(
            children: [
              HomeAppbar(topNav: topNav, changeNav: changeNav, right: InkWell(
                onTap: () async {
                  await roomController.createRtcChannel();
                },
                child: Container(
                  width: 52.w,
                  height: 20.w,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(20.w)),
                      color: const Color.fromRGBO(108, 105, 244, 1)
                  ),
                  child: Center(
                    child: Text(
                      "申请红娘",
                      style: TextStyle(
                          fontSize: 10.w,
                          color: Colors.white,
                          fontWeight: FontWeight.w500
                      ),
                    ),
                  ),
                ),
              ),),
              Container(
                width: 351.w,
                height: 45.w,
                child: SingleChildScrollView(
                  scrollDirection: Axis.horizontal,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      ...tabList.asMap().entries.map((entry){
                        return Container(
                          margin: EdgeInsets.only(right: 27.w),
                          child: InkWell(
                            onTap: (){
                              active = entry.key;
                              setState(() {

                              });
                            },
                            child: Container(
                              height: 21.w,
                              padding: EdgeInsets.symmetric(horizontal: active == entry.key ? 30.w : 0),
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.all(Radius.circular(21.w)),
                                  color: Color.fromRGBO(108, 105, 244, active == entry.key ? 1 : 0)
                              ),
                              child: Center(
                                child: Text(
                                  entry.value,
                                  style: TextStyle(
                                      fontSize: 12.w,
                                      color: active == entry.key ? Colors.white :const Color.fromRGBO(51, 51, 51, .7),
                                      fontWeight:  active == entry.key ? FontWeight.w700 : FontWeight.w500
                                  ),
                                ),
                              ),
                            ),
                          ),
                        );
                      }),
                    ],
                  ),
                ),
              ),
              Expanded(
                child: SingleChildScrollView(
                  child: Wrap(
                    spacing: 7.w,
                    runSpacing: 7.w,
                    children: [
                      ...liveList.map((e){
                        return LiveItem(item: e,);
                      }),

                    ],
                  ),
                ),
              )
            ],
          ),
        )
      ],
    );
  }

  @override
  bool get wantKeepAlive => true;
}



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

  @override
  State<LiveItem> createState() => _LiveItemState();
}

class _LiveItemState extends State<LiveItem> {
  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: (){
        Get.to(() => LiveRoomPage(id: 0));
      },
      child: ClipRRect(
        borderRadius: BorderRadius.all(Radius.circular(10.w)),
        child: Stack(
          children: [
            Container(
              width: 171.w,
              height: 171.w,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(10.w))
              ),
              child: Image.network(
                "https://picsum.photos/400",
                width: 171.w,
                height: 171.w,
              ),
            ),
            Positioned(
              top: 0,
              left: 0,
              child: Stack(
                children: [
                  Image.asset(
                    Assets.imagesSubscript,
                    width: 56.w,
                    height: 16.w,
                  ),
                  SizedBox(
                    height: 16.w,
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        SizedBox(width: 5.w,),
                        Image.asset(
                          Assets.imagesLocationIcon,
                          width: 6.w,
                          height: 7.w,
                        ),
                        SizedBox(width: 3.w,),
                        Text(
                          "49.9km",
                          style: TextStyle(
                              fontSize: 8.w,
                              color: Colors.white,
                              fontWeight: FontWeight.w500
                          ),
                        )
                      ],
                    ),
                  )
                ],
              ),
            ),
            if(widget.item["isNew"]) Positioned(
              top: 9.w,
              right: 8.w,
              child: Container(
                width: 39.w,
                height: 13.w,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(13.w)),
                    color: const Color.fromRGBO(0, 0, 0, .3)
                ),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Container(
                      width: 5.w,
                      height: 5.w,
                      margin: EdgeInsets.only(right: 3.w),
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(5.w)),
                          color: const Color.fromRGBO(255, 209, 43, 1)
                      ),
                    ),
                    Text(
                      "等待",
                      style: TextStyle(
                          fontSize: 8.w,
                          color: Colors.white,
                          fontWeight: FontWeight.w500
                      ),
                    )
                  ],
                ),
              ),
            ),
            Positioned(
              left: 9.w,
              bottom: 6.w,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  SizedBox(
                    width: 64.w,
                    child: Text(
                      "一直一直在等你一直一直在等你......",
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(
                          fontSize: 8.w,
                          color: Colors.white,
                          fontWeight: FontWeight.w500
                      ),
                    ),
                  ),
                  SizedBox(height: 2.w,),
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Text(
                        "福州 | 28岁",
                        style: TextStyle(
                            fontSize: 11.w,
                            color: Colors.white,
                            fontWeight: FontWeight.w500
                        ),
                      ),
                      SizedBox(width: 5.w,),
                      if(widget.item["isNew"]) Container(
                        width: 32.w,
                        height: 10.w,
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.all(Radius.circular(10.w)),
                            color: const Color.fromRGBO(255, 206, 28, .8)
                        ),
                        child: Center(
                          child: Text(
                            "新人",
                            style: TextStyle(
                                fontSize: 8.w,
                                color: Colors.white,
                                fontWeight: FontWeight.w500
                            ),
                          ),
                        ),
                      )
                    ],
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}