import 'package:agora_rtc_engine/agora_rtc_engine.dart';
import 'package:app/pages/student/room/viewmodel/stu_room_vm.dart';
import 'package:app/widgets/room/video_surface.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class StudentVideoList extends StatelessWidget {
  const StudentVideoList({super.key});

  @override
  Widget build(BuildContext context) {
    final vm = context.watch<StuRoomVM>();
    if (vm.roomInfo.roomStatus != 1) {
      return SizedBox();
    }
    return SafeArea(
      child: Container(
        width: 250,
        padding: EdgeInsets.only(bottom: 30),
        child: ListView.separated(
          padding: EdgeInsets.all(10),
          itemCount: vm.otherStuList.length,
          itemBuilder: (context, index) {
            final item = vm.otherStuList[index];
            return Stack(
              children: [
                AspectRatio(
                  aspectRatio: 1.5 / 1,
                  child: Container(
                    decoration: BoxDecoration(
                      color: Color(0xff373c3e),
                      borderRadius: BorderRadius.circular(10),
                    ),
                    child: VideoSurface(
                      user: item,
                      child: AgoraVideoView(
                        controller: VideoViewController(
                          rtcEngine: vm.engine!,
                          canvas: VideoCanvas(
                            uid: item.rtcUid,
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
                Positioned(
                  bottom: 5,
                  left: 5,
                  child: Container(
                    padding: EdgeInsets.symmetric(horizontal: 7, vertical: 3),
                    decoration: BoxDecoration(
                      color: Colors.black26,
                      borderRadius: BorderRadius.circular(5),
                    ),
                    child: Text(
                      item.userName,
                      style: TextStyle(fontSize: 12, color: Colors.white),
                    ),
                  ),
                ),
              ],
            );
          },
          separatorBuilder: (context, index) => SizedBox(height: 15),
        ),
      ),
    );
  }
}
