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';
import 'package:tdesign_flutter/tdesign_flutter.dart';

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

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

class _DiscoverPageState extends State<DiscoverPage>
    with AutomaticKeepAliveClientMixin, TickerProviderStateMixin {
  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},
  ];

  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,
                        ),
                      ),
                    ),
                  ),
                ),
              ),
              TDTabBar(
                tabs: [
                  TDTab(child: Padding(padding: EdgeInsets.only(right: 16, left: 16), child: Text('全部'))),
                  TDTab(child: Padding(padding: EdgeInsets.only(right: 16, left: 16), child: Text('同城'))),
                  TDTab(child: Padding(padding: EdgeInsets.only(right: 12, left: 12), child: Text('相亲视频'))),
                  TDTab(child: Padding(padding: EdgeInsets.only(right: 12, left: 12), child: Text('相亲语音')))
                ],
                // width: MediaQuery.of(context).size.width - 64,
                backgroundColor: Colors.transparent,
                labelPadding: const EdgeInsets.only(right: 4, top: 10, bottom: 10, left: 4),
                selectedBgColor: const Color.fromRGBO(108, 105, 244, 1),
                unSelectedBgColor: Colors.transparent,
                labelColor: Colors.white,
                dividerHeight: 0,
                tabAlignment: TabAlignment.start,
                outlineType: TDTabBarOutlineType.capsule,
                controller: TabController(length: 4, vsync: this),
                showIndicator: false,
                isScrollable: true,
                onTap: (index){
                  print(index);
                },
              ),
              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> {

  late final RoomController roomController;

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

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () async{
        // Get.to(() => LiveRoomPage(id: 0));
        await roomController.joinChannel('1189028638616588288');
      },
      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,
                              ),
                            ),
                          ),
                        ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}