import 'package:circle_app/app/circle/widgets/info_list_view.dart';
import 'package:circle_app/app/msg/view.dart';
import 'package:circle_app/common/Widgets/open_vip_tip/view.dart';
import 'package:circle_app/router/app_routers.dart';
import 'package:circle_app/util/util.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:get/get.dart';

import '../../util/eventBus.dart';
import '../select_circle/logic.dart';
import 'logic.dart';

class CirclePage extends StatefulWidget {
  CirclePage({Key? key}) : super(key: key);

  @override
  State<CirclePage> createState() => _CirclePageState();
}

class _CirclePageState extends State<CirclePage>
    with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  // 是否需要缓存
  final logic = Get.put(CircleLogic());

  final state = Get.find<CircleLogic>().state;

  var getContext;


  @override
  Widget build(BuildContext context) {
    super.build(context);
    getContext = context;
    return GetBuilder<CircleLogic>(builder: (logic) {
      return Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          decoration: const BoxDecoration(
              color: const Color(0xFF423055), image: bgWidget),
          child: Scaffold(
            resizeToAvoidBottomInset: false,
            backgroundColor: Colors.transparent,
            body: SafeArea(
              child: GetBuilder(builder: (CircleLogic controller) {
                return Stack(
                  children: [
                    Container(
                      child: Column(children: [
                        Container(
                          child: Obx(() {
                            return navigatorItem(controller.statistics.value);
                          }),
                        ),
                        // Text(controller.state.msg),
                        //组件使用
                        Expanded(
                            child: Swiper(
                          itemBuilder: (BuildContext context, int index) {

                            var bean = logic.circle.lists[index];
                            //  final GlobalKey<InfoListViewState> infoListViewKey = GlobalKey<InfoListViewState>();
                            return InfoListView(index, bean, logic);
                          },
                          onIndexChanged: (index) {
                            controller.state.index = index;
                            if (index == logic.circle.lists.length - 1) {
                              logic.loadMore();
                            }
                            print(index.toString());
                          },
                          index: controller.state.index,
                          itemCount: logic.circle.lists.length,
                          viewportFraction: 0.93,
                          // scale: 0.9,
                          loop: false,
                          key: UniqueKey(),
                          // pagination: new SwiperPagination(),//如果不填则不显示指示点
                          // control: new SwiperControl(),//如果不填则不显示左右按钮
                        ))
                      ]),
                    ),
                    Positioned(
                        bottom: 36.sp,
                        right: 10.sp,
                        child: GestureDetector(
                            onTap: () async {
                              List<MyConfigData> numbers = [];
                              numbers.add(MyConfigData(
                                  logic.getCircleIndex().id.toString(),
                                  logic.getCircleIndex().title!,
                                  false));
                              var data = await Get.toNamed(AppRoutes.Call_out,
                                  arguments: {'numbers': numbers});
                            },
                            child: Image.asset(
                              getCircleImage('send_msg'),
                              width: 60.sp,
                            )))
                  ],
                );
              }),
            ),
          ));
    });
  }

  Widget navigatorItem(DataModel statistics) {
    List<String> urlList = [];
    List infoList = [];
    if (statistics != null) {
      infoList = statistics.lastVisitUsers;
      if (infoList.isNotEmpty) {
        for (var element in infoList) {
          if (element["avatar"] != null && element["avatar"].contains("http")) {
            urlList.add(element["avatar"]);
          }

          //    urlList.add(element["avatar"]);
        }
      }
    }

    List<Widget> widgets = [];

    for (int i = 0; i < urlList.length; i++) {
      var element = urlList[i];
      widgets.add(Positioned(
        left: 15.sp * i,
        child: circleWidget(element),
      ));
    }
    if (statistics != null && widgets.isNotEmpty) {
      widgets.add(Positioned(
        left: 15.sp * urlList.length,
        child: circleWidget(statistics.visitCount.toString()),
      ));
    }

    return Container(
      width: Get.width,
      padding: EdgeInsets.only(left: 18.sp, right: 18.sp),
      height: 44.sp,
      child: Stack(
        alignment: Alignment.center,
        children: [
          Positioned(
            left: 0,
            child: GestureDetector(
              onTap: () {
                Get.toNamed(AppRoutes.VisitorListActivity);
              },
              child: SizedBox(
                width: 30.sp * widgets.length,
                height: 44.sp,
                child: Stack(
                  alignment: Alignment.centerLeft,
                  children: widgets,
                ),
              ),
            ),
          ),
          ShaderMask(
            shaderCallback: (Rect bounds) {
              return const LinearGradient(
                begin: Alignment(0.0, -1.0),
                end: Alignment.bottomCenter,
                colors: [Color(0xff71F3F2), Color(0xffF657FF)],
              ).createShader(Offset.zero & bounds.size);
            },
            child: GestureDetector(
              onTap: () {
                EventBusManager.fire(ScrollToTop());
              },
              child: Text(
                '发现',
                style: TextStyle(
                  fontSize: 18.sp,
                  fontWeight: FontWeight.w600,
                  color: Colors.white,
                  shadows: const [
                    Shadow(color: Color(0xffF657FF), offset: Offset(0.0, -1))
                  ],
                ),
              ),
            ),
          ),
          Positioned(
            right: 0,
            child: GestureDetector(
              onTap: () {
                Get.toNamed(AppRoutes.MyCircle, arguments: '');
              },
              child: Image.asset(
                getCircleImage('my_circle'),
                width: 64.sp,
              ),
            ),
          ),
        ],
      ),
    );
  }

  circleWidget(String url, {double width = 30}) {
    return GestureDetector(
        child: Stack(
      alignment: Alignment.center,
      children: [
        Image.asset(
          getCircleImage('avatar_bg'),
          width: width.sp,
        ),
        url.contains("http")
            ? ClipOval(
                child: Image.network(
                  url,
                  width: (width - 1).sp,
                  height: (width - 1).sp,
                  fit: BoxFit.cover,
                ),
              )
            : Text(
                url,
                style: TextStyle(color: Color(0xffF756FF), fontSize: 12.sp),
              )
      ],
    ));
  }

  void _showTextContentDialog(BuildContext context, String msg) {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return Dialog(
          backgroundColor: Colors.transparent,
          child: Container(
            height: 300.sp,
            padding: EdgeInsets.all(1.0),
            child: Stack(
              children: [
                Container(
                  decoration: BoxDecoration(
                    shape: BoxShape.rectangle,
                    borderRadius: BorderRadius.circular(10.0),
                    gradient: LinearGradient(
                      colors: [Color(0xFFDD3DF4), Color(0xFF30FFD9)],
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                    ),
                  ),
                ),
                Container(
                  margin: EdgeInsets.all(1.sp),
                  decoration: BoxDecoration(
                    shape: BoxShape.rectangle,
                    borderRadius: BorderRadius.circular(10.0),
                    gradient: LinearGradient(
                      colors: [Color(0xFF4C3E5F), Color(0xFF324140)],
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                    ),
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(top: 24.sp),
                  child: Column(
                    children: [
                      Container(
                        margin: EdgeInsets.only(
                            top: 12.sp, left: 14.sp, right: 14.sp),
                        alignment: Alignment.center,
                        child: Text(
                          msg,
                          textAlign: TextAlign.center,
                          style: TextStyle(
                              color: Color(0xCCF7FAFA), fontSize: 16.sp),
                        ),
                      ),
                    ],
                  ),
                )
              ],
            ),
          ),
        );
      },
    );
  }

  void _showOutCircleDialog(
      BuildContext context, CircleLogic controller, Circle bean) {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return Dialog(
          backgroundColor: Colors.transparent,
          child: Container(
            height: 160.sp,
            padding: EdgeInsets.all(1.0),
            child: Stack(
              children: [
                Container(
                  decoration: BoxDecoration(
                    shape: BoxShape.rectangle,
                    borderRadius: BorderRadius.circular(10.0),
                    gradient: LinearGradient(
                      colors: [Color(0xFFDD3DF4), Color(0xFF30FFD9)],
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                    ),
                  ),
                ),
                Container(
                  margin: EdgeInsets.all(1.sp),
                  decoration: BoxDecoration(
                    shape: BoxShape.rectangle,
                    borderRadius: BorderRadius.circular(10.0),
                    gradient: LinearGradient(
                      colors: [Color(0xFF4C3E5F), Color(0xFF324140)],
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                    ),
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(top: 24.sp),
                  child: Column(
                    children: [
                      Center(
                        child: Text(
                          "提示",
                          style:
                              TextStyle(color: Colors.white, fontSize: 16.sp),
                        ),
                      ),
                      Container(
                        margin: EdgeInsets.only(
                            top: 12.sp, left: 14.sp, right: 14.sp),
                        alignment: Alignment.center,
                        child: Text(
                          "是否确认退出该圈子。",
                          textAlign: TextAlign.center,
                          style: TextStyle(
                              color: Color(0xCCF7FAFA), fontSize: 16.sp),
                        ),
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        //  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          GestureDetector(
                            onTap: () {
                              Navigator.pop(context);
                            },
                            child: Container(
                              margin: EdgeInsets.only(top: 30.sp),
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(17),
                                gradient: LinearGradient(
                                  colors: [
                                    Color(0x26FFFFFF),
                                    Color(0x26FFFFFF),
                                  ],
                                  begin: Alignment.centerLeft,
                                  end: Alignment.centerRight,
                                ),
                              ),
                              padding: EdgeInsets.only(
                                  top: 10.sp,
                                  bottom: 10.sp,
                                  left: 52.sp,
                                  right: 52.sp),
                              child: Text(
                                "否",
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 12,
                                ),
                              ),
                            ),
                          ),
                          SizedBox(width: 24.sp),
                          GestureDetector(
                            onTap: () {
                              Navigator.pop(context);
                              logic.outCircle(bean.id.toString(), bean.isJoin!);
                            },
                            child: Container(
                              margin: EdgeInsets.only(top: 24.sp),
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(17),
                                gradient: LinearGradient(
                                  colors: [
                                    Color(0xFF06F9FA),
                                    Color(0xFFDC5BFD),
                                  ],
                                  begin: Alignment.centerLeft,
                                  end: Alignment.centerRight,
                                ),
                              ),
                              padding: EdgeInsets.only(
                                  top: 10.sp,
                                  bottom: 10.sp,
                                  left: 52.sp,
                                  right: 52.sp),
                              child: Text(
                                "是",
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 12,
                                ),
                              ),
                            ),
                          )
                        ],
                      )
                    ],
                  ),
                )
              ],
            ),
          ),
        );
      },
    );
  }
}