import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
import 'package:yumi/app/constants/sc_global_config.dart';
import 'package:provider/provider.dart';

import 'package:yumi/ui_kit/components/sc_compontent.dart';
import 'package:yumi/ui_kit/components/text/sc_text.dart';
import 'package:yumi/shared/tools/sc_lk_dialog_util.dart';
import 'package:yumi/services/room/rc_room_manager.dart';
import 'package:yumi/services/audio/rtc_manager.dart';
import 'package:yumi/modules/room/online/room_online_page.dart';
import 'package:yumi/modules/room/rank/room_gift_rank_page.dart';

class RoomOnlineUserWidget extends StatefulWidget {
  @override
  _RoomOnlineUserWidgetState createState() => _RoomOnlineUserWidgetState();
}

class _RoomOnlineUserWidgetState extends State<RoomOnlineUserWidget> {
  @override
  Widget build(BuildContext context) {
    return Consumer<RtcProvider>(
      builder: (context, ref, child) {
        return Row(
          children: [
            _buildExperience(),
            SizedBox(width: 15.w),
            ref.onlineUsers.isNotEmpty
                ? Expanded(
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Spacer(),
                      SizedBox(
                        height: 25.w,
                        child: Stack(
                          clipBehavior: Clip.none,
                          children: [
                            SingleChildScrollView(
                              scrollDirection: Axis.horizontal,
                              child: Row(
                                mainAxisSize: MainAxisSize.min,
                                children: List.generate(
                                  ref.onlineUsers.length,
                                      (index) {
                                    return Transform.translate(
                                      offset: Offset(-3.w * index, 0),
                                      child: Padding(
                                        padding: EdgeInsets.only(right: 0.w),
                                        child: netImage(
                                          url:
                                          ref
                                              .onlineUsers[index]
                                              .userAvatar ??
                                              "",
                                          width: 23.w,
                                          height: 23.w,
                                          shape: BoxShape.circle,
                                          border: Border.all(
                                            color: Colors.white,
                                            width: 1.w,
                                          ),
                                        ),
                                      ),
                                    );
                                  },
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                      GestureDetector(
                        child: Container(
                          padding: EdgeInsets.symmetric(
                            horizontal: 3.w,
                            vertical: 3.w,
                          ),
                          child: Column(
                            children: [
                              Image.asset(
                                "sc_images/room/sc_icon_online_peple.png",
                                width: 12.w,
                                height: 12.sp,
                              ),
                              text(
                                "${ref.onlineUsers.length}",
                                fontSize: 9.sp,
                              ),
                            ],
                          ),
                        ),
                        onTap: () {
                          showBottomInBottomDialog(
                            context,
                            RoomOnlinePage(
                              roomId:
                              ref
                                  .currenRoom
                                  ?.roomProfile
                                  ?.roomProfile
                                  ?.id,
                            ),
                          );
                        },
                      ),
                      SizedBox(width: 5.w,)
                    ],
                  ),
                )
                : Container(),
          ],
        );
      },
    );
  }

  ///房间榜单入口
  _buildExperience() {
    return Consumer<SocialChatRoomManager>(
      builder: (context, ref, child) {
        return GestureDetector(
          child: Container(
            width: 90.w,
            height: 27.w,
            decoration: BoxDecoration(
              color: Colors.white10,
              borderRadius: BorderRadiusDirectional.only(
                topEnd: Radius.circular(20.w),
                bottomEnd: Radius.circular(20.w),
              ),
            ),
            alignment: AlignmentDirectional.center,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Image.asset(
                  "sc_images/room/sc_icon_room_contribute.png",
                  width: 18.w,
                  height: 18.w,
                ),
                SizedBox(width: 5.w),
                text(
                  "${ref.roomContributeLevelRes?.thisWeekIntegral ?? 0}",
                  fontSize: 13.sp,
                  textColor: Colors.orangeAccent,
                  fontWeight: FontWeight.w600,
                ),
                Icon(
                  Icons.chevron_right,
                  size: 13.w,
                  color: Colors.orangeAccent,
                ),
              ],
            ),
          ),
          onTap: () {
            SmartDialog.show(
              tag: "showRoomGiftRankPage",
              alignment: Alignment.bottomCenter,
              animationType: SmartAnimationType.fade,
              builder: (_) {
                return RoomGiftRankPage();
              },
            );
          },
        );
      },
    );
  }
}