import 'package:dating_touchme_app/components/home_appbar.dart';
import 'package:dating_touchme_app/provide/user_info.dart';
import 'package:dating_touchme_app/utils/storage.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:provider/provider.dart';

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

  @override
  State<LivePage> createState() => _LivePageState();
}

class _LivePageState extends State<LivePage> {


  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;

  @override
  void initState() {
    super.initState();
  }



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


  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 24.w),
      constraints: BoxConstraints(minHeight: ScreenUtil().setHeight(1220)),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,     // 对应 180deg，从上到下
          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], // 对应 0% 和 100%
        ),
      ),
      child: Column(
        children: [
          HomeAppbar(topNav: topNav, changeNav: changeNav,),
          Container(
            width: 702.w,
            height: 91.w,
            child: SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  ...tabList.asMap().entries.map((entry){
                    return Container(
                      margin: EdgeInsets.only(right: 55.w),
                      child: InkWell(
                        onTap: (){
                          active = entry.key;
                          setState(() {

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

            ],
          )
        ],
      ),
    );
  }
}

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 ClipRRect(
      borderRadius: BorderRadius.all(Radius.circular(20.w)),
      child: Stack(
        children: [
          Container(
            width: 343.w,
            height: 343.w,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(20.w))
            ),
            child: Image.network(
              "https://picsum.photos/400",
              width: 343.w,
              height: 343.w,
            ),
          ),
          Positioned(
            top: 0,
            left: 0,
            child: Stack(
              children: [
                Image.asset(
                  "assets/subscript.png",
                  width: 113.w,
                  height: 32.w,
                ),
                SizedBox(
                  height: 32.w,
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      SizedBox(width: 10.w,),
                      Image.asset(
                        "assets/location_icon.png",
                        width: 12.w,
                        height: 14.w,
                      ),
                      SizedBox(width: 6.w,),
                      Text(
                        "49.9km",
                        style: TextStyle(
                            fontSize: 16.w,
                            color: Colors.white,
                            fontWeight: FontWeight.w500
                        ),
                      )
                    ],
                  ),
                )
              ],
            ),
          ),
          if(widget.item["isNew"]) Positioned(
            top: 19.w,
            right: 17.w,
            child: Container(
              width: 79.w,
              height: 26.w,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(26.w)),
                color: const Color.fromRGBO(0, 0, 0, .3)
              ),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Container(
                    width: 10.w,
                    height: 10.w,
                    margin: EdgeInsets.only(right: 6.w),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(10.w)),
                      color: const Color.fromRGBO(255, 209, 43, 1)
                    ),
                  ),
                  Text(
                    "等待",
                    style: TextStyle(
                      fontSize: 16.w,
                      color: Colors.white,
                      fontWeight: FontWeight.w500
                    ),
                  )
                ],
              ),
            ),
          ),
          Positioned(
            left: 18.w,
            bottom: 13.w,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                SizedBox(
                  width: 128.w,
                  child: Text(
                    "一直一直在等你一直一直在等你......",
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                      fontSize: 16.w,
                      color: Colors.white,
                      fontWeight: FontWeight.w500
                    ),
                  ),
                ),
                SizedBox(height: 5.w,),
                Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Text(
                      "福州 | 28岁",
                      style: TextStyle(
                        fontSize: 22.w,
                        color: Colors.white,
                        fontWeight: FontWeight.w500
                      ),
                    ),
                    SizedBox(width: 11.w,),
                    if(widget.item["isNew"]) Container(
                      width: 65.w,
                      height: 21.w,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.all(Radius.circular(21.w)),
                        color: const Color.fromRGBO(255, 206, 28, .8)
                      ),
                      child: Center(
                        child: Text(
                          "新人",
                          style: TextStyle(
                            fontSize: 16.w,
                            color: Colors.white,
                            fontWeight: FontWeight.w500
                          ),
                        ),
                      ),
                    )
                  ],
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}