import 'package:flutter/material.dart';
import 'package:common_project/common_project.dart';
import 'package:module_home/model/home_may_like_model.dart';
import 'package:module_home/model/home_room_list_model.dart';
import 'package:module_home/model/home_search_content_users_model.dart';
import 'package:module_home/model/home_search_rtc_room_model.dart';
import 'package:module_home/view_model/search_index/search_index_cubit.dart';
class HomeSearchIndexPage extends StatefulWidget {
  const HomeSearchIndexPage({Key? key}) : super(key: key);

  @override
  _HomeSearchIndexPageState createState() => _HomeSearchIndexPageState();
}

class _HomeSearchIndexPageState extends State<HomeSearchIndexPage> with TickerProviderStateMixin {

  TabController?tabController;

  @override
  void initState() {
    // TODO: implement initState
    tabController = TabController(length: 3, vsync: this);

    super.initState();
  }


  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => SearchIndexCubit(),
      child: Builder(builder: (context){

        SearchIndexCubit bloc  = BlocProvider.of<SearchIndexCubit>(context);
        return Container(
          color: HexColor.fromHex("#F7F8FA"),
          child: Column(
            children: [
              Container(
                margin: EdgeInsets.only(top: Sizes.topSafeHeight + 22.h,left: 40.w,right: 40.w),
                padding: EdgeInsets.only(left: 20.w),
                width: Sizes.width,
                height: 72.h,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Container(
                      width: 578.w,
                      height: 72.h,
                      padding: EdgeInsets.only(left: 20.w),
                      child: Row(
                        children: [
                          Icon(Icons.search,size: 32.w,),
                          Container(
                            width: 400.w,
                            height: 72.h,

                            alignment: Alignment.center,
                            child: TextField(
                              controller: bloc.state.searchController,
                              decoration: InputDecoration(
                                  hintText: "请输入",
                                hintStyle: TextStyle(fontSize: Sizes.fs_28),
                                border: InputBorder.none
                              ),
                              onSubmitted: (str){

                                if(ObjectUtil.isNotEmpty(str)){
                                  bloc.searchAction(str);
                                }
                              },
                            ),
                          )
                        ],
                      ),
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(36.h)),
                          color: Colors.white
                      ),
                    ),
                    InkWell(
                      child: Container(
                        child: Text("取消"),
                      ),
                      onTap: (){
                        Navigator.pop(context);
                      },
                    )
                  ],
                ),

              ),
             Builder(builder: (context){
               SearchIndexCubit bloc = BlocProvider.of<SearchIndexCubit>(context);
               context.select((SearchIndexCubit bloc) => bloc.state.hidehistory);
               return  Expanded(
                 child: bloc.state.hidehistory == true? Column(
                   children: [
                     TabBar(
                       controller: tabController,
                       indicatorColor: Colors.red,
                       labelColor: Colors.red,
                       unselectedLabelColor: Colors.black,
                         indicatorSize: TabBarIndicatorSize.label,
                         tabs: [Tab(text: "综合",),Tab(text: '房间',),Tab(text: "用户",)]
                     ),
                     Expanded(child: TabBarView(
                         controller: tabController,
                         children: [
                           ListView(
                             children: [
                               relevanceUsers(),
                               relevanceRooms()
                             ],
                           ),
                           Builder(builder: (context){
                             SearchIndexCubit bloc  = BlocProvider.of<SearchIndexCubit>(context);
                             context.select((SearchIndexCubit bloc) => bloc.state.rooms);
                             return ListView(
                               children: bloc.state.rooms!.length> 0?bloc.state.rooms!.map((e) {
                                 
                                 return roomItem(e);
                               }).toList():[EmptyStateLayout(hintText: '暂无数据', type: StateType.emptyData,)],
                             );
                           }),
                           
                           Builder(builder: (context){
                             SearchIndexCubit bloc  = BlocProvider.of<SearchIndexCubit>(context);
                             return ListView(
                               children: bloc.state.users!.length > 0 ?bloc.state.users!.map((e){
                                 return userItem(e);
                               }).toList():[EmptyStateLayout(hintText: '暂无数据', type: StateType.emptyData,)],
                             );
                           })

                         ]))
                   ],
                 ):emptWidget(bloc),
               );
             })
            ],
          ),
        );
      }),
    );
  }


  Widget relevanceUsers(){
    return Container(
      child: Column(
        children: [
          Container(
            padding: EdgeInsets.only(left: 20.w,right: 40.w,bottom: 20.h),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text("相关用户",style: TextStyle(fontSize: Sizes.fs_32,fontWeight: FontWeight.w600),),
                Row(
                  children: [
                    Text("更多"),
                    Icon(Icons.chevron_right)
                  ],
                )
              ],
            ),
          ),
          Builder(builder: (context){
            SearchIndexCubit bloc  = BlocProvider.of<SearchIndexCubit>(context);
            context.select((SearchIndexCubit bloc) => bloc.state.users);
            return bloc.state.users!= null && bloc.state.users!.length > 0 ? Container(
              width: Sizes.width,
              height: 326.h,
              padding: EdgeInsets.only(left: 20.w),
              child: Wrap(
                spacing: 10.w,
                children: bloc.state.users!.map((e) {
                        int index = bloc.state.users!.indexOf(e);
                  return Container(
                    width: 220.w,
                    height: 316.h,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        InkWell(
                          child: Column(
                            children: [
                              e.userAvatar != null?ClipOval(
                                child: ImageUtil.loadImage(e.userAvatar,width: 120.w,height: 120.w),
                              ):Container(
                              ),
                              SizedBox(height: 8.h,),
                              Container(
                                padding: EdgeInsets.only(left: 5.w),
                                child: Text("${e.userName}",maxLines: 1,style: TextStyle(fontSize: Sizes.fs_28),overflow: TextOverflow.ellipsis,),
                              ),
                            ],
                          ),
                          onTap: (){
                            Application.navigateTo(context: context, route:RouterPath().pInfoPage,params: {"userId":e.userId});
                          },
                        ),


                        SizedBox(height: 8.h,),
                        Builder(builder: (context){
                          SearchIndexCubit bloc  = BlocProvider.of<SearchIndexCubit>(context);
                          context.select((SearchIndexCubit bloc) => bloc.state.users);
                          context.select((SearchIndexCubit bloc) => bloc.state.users![index].followStatus);
                          return InkWell(
                            child: Container(
                              height: 52.h,
                              margin: EdgeInsets.only(left: 40.w,right: 40.w),
                              padding: EdgeInsets.only(left: 15.w,right: 15.w),
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.all(Radius.circular(26.h)),
                                  color: e.followStatus == true?HexColor.fromHex("#F6F7FB"): Colors.pink
                              ),
                              child: Row(
                                children: [
                                 e.followStatus == true?Icon(Icons.done,size: 20.w,color: HexColor.fromHex("#C4C6CC"),): Icon(Icons.add,color: Colors.white,size: 20.w,),
                                  SizedBox(width: 5.w,),
                                  Text("${e.followStatus == true?"已关注":"关注"}",style: TextStyle(color: e.followStatus == true?HexColor.fromHex("#E3E3E5"): Colors.white,fontSize: Sizes.fs_24),)
                                ],
                              ),
                            ),
                            onTap: (){
                              bloc.followAction(e.followStatus!, e.userId!);
                            },
                          );
                        })
                      ],
                    ),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.all(Radius.circular(10.w)),
                        color: Colors.white,
                        border: Border.all(color: HexColor.fromHex("#E3E3E5"),width: 2.w)
                    ),
                  );
                }).toList(),
              ),
            ):EmptyStateLayout(hintText: '暂无数据', type: StateType.emptyData,);
          })
        ],
      ),
    );
  }
  Widget relevanceRooms(){
    return Container(
      padding: EdgeInsets.only(left: 10.w,right: 10.w),
      child: Column(
        children: [
          Container(
            padding: EdgeInsets.only(left: 20.w,right: 40.w,bottom: 20.h),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text("相关房间",style: TextStyle(fontSize: Sizes.fs_32,fontWeight: FontWeight.w600),),
                Row(
                  children: [
                    Text("更多"),
                    Icon(Icons.chevron_right)
                  ],
                )
              ],
            ),
          ),
          Builder(builder: (context){
            SearchIndexCubit bloc  = BlocProvider.of<SearchIndexCubit>(context);
            context.select((SearchIndexCubit bloc) => bloc.state.rooms);

            return bloc.state.rooms!.length>0?  GridView.builder(
                shrinkWrap: true,//收缩包装
                scrollDirection: Axis.vertical,
                physics: NeverScrollableScrollPhysics(),
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  //横轴元素个数
                    crossAxisCount: 2,
                    //纵轴间距
                    mainAxisSpacing: 10.w,
                    //横轴间距
                    crossAxisSpacing: 10.w,
                    //子组件宽高长度比例
                    childAspectRatio: 1.0
                ),
                itemCount: bloc.state.rooms!.length,
                itemBuilder: (BuildContext context, int index) =>
                    _gridItem(bloc.state.rooms![index])
            ):Container(
              child: EmptyStateLayout(hintText: '暂无数据', type: StateType.emptyData,),
            );
          })
        ],
      ),
    );
  }

  Widget roomItem(SearchRtcRoomItem item){
    return InkWell(
      child: Container(
        width: Sizes.width,
        height: 140.h,
        margin: EdgeInsets.only(bottom: 10.h),
        child: Stack(
          alignment: Alignment.center,
          children: [
            Positioned(
                right: 20.w,
                top: 0,
                child: Container(width: Sizes.width-50.w,height: 140.h,color: Colors.pink.withOpacity(0.1),)
            ),
            Positioned(
                top: 15.h,
                left: 10.w,
                child: Row(
                  children: [
                    ClipRRect(
                      child: ImageUtil.loadImage(item.roomCover,width: 100.w,height: 100.w),
                      borderRadius: BorderRadius.all(Radius.circular(10.w)),
                    ),
                    SizedBox(width: 10.w,),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text("${item.roomName}"),
                        Text("房间ID： ${item.roomNo}")
                      ],
                    )
                  ],
                )
            ),
            Positioned(
                bottom: 20.h,
                left: 30.w,
                child: Container(
                  padding: EdgeInsets.only(left: 10.w,right: 10.w),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(10.w)),
                    color: Colors.purple,
                  ),
                  child: Text("${item.categoryName}",style: TextStyle(fontSize: Sizes.fs_20,color: Colors.white),),
                )
            )
          ],
        ),
      ),
      onTap: (){
        if(item.roomType == RoomType.RoomTypeCommon){
          ChatRoomManager.instance.enterRoom(context, "${item.roomId}", null,coverUrl: "${item.roomCover}");
        } else {
          ToastUtil.showToast('${S.of(context).appRoomTips}');
        }
      },
    );
  }

  Widget userItem(SearchContentUser item){
    return InkWell(
      child: Container(
        margin: EdgeInsets.only(bottom: 10.h),
        child: Row(
          children: [
            SizedBox(width: 40.w,),
            ClipOval(
              child: ImageUtil.loadImage(item.userAvatar,width: 100.w,height: 100.w),
            ),
            SizedBox(width: 10.w,),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  children: [
                    Text("${item.userName}"),
                    SizedBox(width: 5.w,),
                    Image.asset("assets/money_icon/label_caifu_lv${item.wealthLevel}.png",width: 64.w,height: 40.h,package: ModuleName.Module_project,)
                  ],
                ),
                SizedBox(height: 8.h,),
                Text("ID： ${item.userNo}",)
              ],
            )
          ],
        ),
      ),
      onTap: (){
        Application.navigateTo(context: context, route:RouterPath().pInfoPage,params: {"userId":item.userId});
      },
    );
  }

  Widget _gridItem(SearchRtcRoomItem item){
    return InkWellDelay(
      shakeTime: 1,
      onTap: (){
        XLog.d("进入页面的次数");
        if(item.roomType == RoomType.RoomTypeCommon){
          ChatRoomManager.instance.enterRoom(context, "${item.roomId}", null,coverUrl: "${item.roomCover}");
        } else {
          ToastUtil.showToast('${S.of(context).appRoomTips}');
        }
        // Application.navigateTo(context: context, route: RouterPath().chatHome,params: {"roomId":data.roomId});

      },
      child: Container(
        decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(16.w)),
            color: Colors.blue
        ),
        child: Stack(
          children: [
            Container(
              alignment: Alignment.center,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(16.w)),
                  image: DecorationImage(image: ImageUtil.getImageProvider('${item.roomCover}'),fit: BoxFit.cover)
              ),
            ),
            Align(
              alignment: Alignment.topLeft,
              child: Container(
                padding: EdgeInsets.all(5.w),

                decoration: BoxDecoration(
                  borderRadius: BorderRadius.only(topLeft: Radius.circular(16.w),bottomLeft: Radius.circular(8.w),bottomRight: Radius.circular(30.w)),
                  color: HexColor.fromHex("#000000").withOpacity(0.3),
                ),
                child: Text('ID:${item.roomNo}',style: TextStyle(fontSize: Sizes.fs_16,color: Colors.white),),
              ),
            ),
            Align(
              alignment: Alignment.bottomLeft,
              child: Container(
                height: 30.h,
                margin: EdgeInsets.only(left: 10.w,bottom: 10.h),
                padding: EdgeInsets.only(left: 10.w,right: 10.w),
                decoration: BoxDecoration(
                    color: HexColor.fromHex("#000000").withOpacity(0.3),
                    borderRadius: BorderRadius.all(Radius.circular(15.h))
                ),

                //Lottie.asset("assets/lotties/json/living.json")
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Lottie.asset("assets/lotties/json/living.json",width: 20.w,height: 20.h),
                    SizedBox(width: 5.w,),
                    Text('${item.roomHeat}',style: TextStyle(fontSize: Sizes.fs_20,color: Colors.white),)
                  ],
                ),
              ),
            ),
            Align(
              alignment: Alignment.bottomRight,
              child: Container(
                margin: EdgeInsets.only(bottom: 10.h,right: 10.w),
                padding: EdgeInsets.only(left: 10.w,right: 10.w,top: 5.h,bottom: 5.h),
                decoration: BoxDecoration(
                    color: Colors.red,
                    borderRadius: BorderRadius.all(Radius.circular(10.w))
                ),
                child: Text('${item.categoryName}',style: TextStyle(fontSize: Sizes.fs_20,color: Colors.white),),
              ),
            ),
          ],
        ),
      ),);
  }

  ListView emptWidget(SearchIndexCubit bloc) {
    return ListView(
                children: [
                  Container(
                    width: Sizes.width,
                    child: Column(
                      children: [
                        Container(
                          padding: EdgeInsets.only(left: 40.w,right: 40.w),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text("搜索历史",style: TextStyle(fontSize: Sizes.fs_32,fontWeight: FontWeight.w600),),


                              InkWell(
                                child: Icon(Icons.restore_from_trash_sharp),
                                onTap: (){
                                  bloc.removeSearchHis();
                                },
                              )
                            ],
                          ),
                        ),
                        Builder(builder: (context){
                          SearchIndexCubit bloc  = BlocProvider.of<SearchIndexCubit>(context);
                          context.select((SearchIndexCubit bloc) => bloc.state.searchHistory);
                          return bloc.state.searchHistory != null && bloc.state.searchHistory!.length > 0? Container(
                            width: Sizes.width,
                            padding: EdgeInsets.only(left: 40.w,top: 40.h),
                            child: Wrap(
                              spacing: 20.w,
                              runSpacing: 20.h,
                              children: bloc.state.searchHistory!.map((e) {

                                return InkWell(
                                  child: Container(
                                    padding: EdgeInsets.only(left: 20.w,right: 20.w),
                                    child: Text("${e}",style: TextStyle(fontSize: Sizes.fs_28,color: Colors.black),),
                                    decoration: BoxDecoration(
                                      borderRadius: BorderRadius.all(Radius.circular(32.h)),
                                      color: HexColor.fromHex("#EBEEF5"),

                                    ),
                                  ),
                                  onTap: (){
                                    bloc.state.searchController!.text = e;
                                    bloc.searchAction(e);
                                  },
                                );

                              }).toList(),
                            ),
                          ):Container();

                        }),
                        Container(
                          width: Sizes.width,
                          padding: EdgeInsets.only(left: 40.w,top: 40.h,bottom: 40.h),
                          child: Text("猜你喜欢",style: TextStyle(fontSize: Sizes.fs_32,fontWeight: FontWeight.w600),),
                        ),
                       Builder(builder: (context){
                         SearchIndexCubit bloc = BlocProvider.of<SearchIndexCubit>(context);
                         
                         context.select((SearchIndexCubit bloc) => bloc.state.items);
                         return  bloc.state.items!.length > 0?Column(
                           children: bloc.state.items!.map((e) {


                             return _likeItem(e);

                           }).toList(),
                         ):Container();
                       })
                      ],
                    ),
                  )
                ],
              );
  }
  Widget _likeItem(LikeItem item){
    return Container(
      width: Sizes.width,
      padding: EdgeInsets.only(left: 50.w,right: 40.w),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Row(
            children: [
              ClipOval(
                child: item.userAvatar == null? Container(
                  width: 100.w,
                  height: 100.w,
                  color: Colors.pink,
                ):ImageUtil.loadImage(item.userAvatar,width: 100.w,height: 100.w),
              ),
              SizedBox(width: 8.w,),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text("${item.userName}",style: TextStyle(fontSize: Sizes.fs_32),),
                  _ageWidget(item),
                  Text("签名：${item.userSign}")
                ],
              )
            ],
          ),
          Text("${item.locationCity} ｜ 最近")
        ],
      ),
    );


  }
  Widget _ageWidget(LikeItem item){
    return Container(
      width: 64.w,
      height: 40.h,
      alignment: Alignment.centerRight,
      child: Stack(children: [
        // Image.asset(bloc.state.user!.data!.userSex! == 0?"label_gender_boy":"setting",package: ModuleName.Module_Me,width: 64.w,height: 40.h),
        Image.asset(item.userSex! == 1? "assets/other_icon/label_gender_boy.png":"assets/other_icon/label_gender_gril.png",width: 64.w,height: 40.h,package: ModuleName.Module_project),
        Positioned(child: Text("${item.userAge!}",style: TextStyle(fontSize: Sizes.fs_20,color: Colors.white),),right: 5,top: 4,)
      ],),
    );
  }
}