import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:provider/provider.dart';

import 'package:aslan/chatvibe_ui/components/at_compontent.dart';
import 'package:aslan/chatvibe_ui/components/text/at_text.dart';
import 'package:aslan/chatvibe_core/utilities/at_lk_dialog_util.dart';
import 'package:aslan/chatvibe_managers/rtc_manager.dart';

import '../../../chatvibe_features/room/online/at_room_online_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) {
        if (ref.playingLudoGame != null && !ref.isMinLudoGame) {
          return Container();
        }
        return Row(
          children: [
            SizedBox(width: 15.w),
            GestureDetector(
              child: Container(
                padding: EdgeInsets.symmetric(horizontal: 3.w, vertical: 3.w),
                decoration: BoxDecoration(
                  color: Colors.white12,
                  borderRadius: BorderRadius.all(Radius.circular(25.w)),
                ),
                child: Row(
                  children: [
                    SizedBox(width: 3.w),
                    Image.asset(
                      "atu_images/room/at_icon_online_peple.png",
                      width: 12.w,
                      height: 12.sp,
                    ),
                    SizedBox(width: 3.w),
                    text("${ref.onlineUsers.length}", fontSize: 9.sp),
                    Icon(
                      Icons.chevron_right_outlined,
                      size: 10.w,
                      color: Colors.white,
                    ),
                  ],
                ),
              ),
              onTap: () {
                showBottomInBottomDialog(
                  context,
                  ATRoomOnlinePage(
                    roomId: ref.currenRoom?.roomProfile?.roomProfile?.id,
                  ),
                );
              },
            ),
            SizedBox(width: 5.w),
            ref.onlineUsers.isNotEmpty
                ? Expanded(
                  child: 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,
                                    ),
                                  ),
                                ),
                              );
                            }),
                          ),
                        ),
                      ],
                    ),
                  ),
                )
                : Container(),
          ],
        );
      },
    );
  }
}