import 'package:agora_rtc_engine/agora_rtc_engine.dart';
import 'package:app/config/config.dart';
import 'package:app/providers/user_store.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import '../viewmodel/tch_room_vm.dart';
import 'student_item.dart';

class ContentView extends StatefulWidget {
  const ContentView({super.key});

  @override
  State<ContentView> createState() => _ContentViewState();
}

class _ContentViewState extends State<ContentView> {
  //声网数据
  RtcEngine? _engine;

  @override
  void initState() {
    super.initState();
    _initRtc();
  }

  @override
  void dispose() {
    super.dispose();
    _dispose();
  }

  void _initRtc() async {
    UserStore userStore = context.read<UserStore>();
    final vm = context.read<TchRoomVM>();
    _engine = createAgoraRtcEngine();
    //初始化 RtcEngine，设置频道场景为 channelProfileLiveBroadcasting（直播场景）
    await _engine!.initialize(
      RtcEngineContext(
        appId: Config.swAppId,
        channelProfile: ChannelProfileType.channelProfileCommunication,
      ),
    );
    //添加回调
    _engine!.registerEventHandler(
      RtcEngineEventHandler(
        // 成功加入频道回调
        onJoinChannelSuccess: (RtcConnection connection, int elapsed) {
          setState(() {});
        },
        // 远端用户或主播加入当前频道回调
        onUserJoined: (RtcConnection connection, int remoteUid, int elapsed) {},
        // 远端用户或主播离开当前频道回调
        onUserOffline: (RtcConnection connection, int remoteUid, UserOfflineReasonType reason) {},
      ),
    );
    //启动视频模块
    await _engine!.enableVideo();
    //加入频道
    await _engine!.joinChannel(
      token: vm.rtcToken!.token,
      channelId: vm.rtcToken!.channel,
      uid: userStore.userInfo!.id,
      options: ChannelMediaOptions(
        // 自动订阅所有视频流
        autoSubscribeVideo: true,
        // 自动订阅所有音频流
        autoSubscribeAudio: true,
        // 发布摄像头采集的视频
        publishCameraTrack: true,
        // 发布麦克风采集的音频
        publishMicrophoneTrack: true,
        // 设置用户角色为 clientRoleBroadcaster（主播）或 clientRoleAudience（观众）
        clientRoleType: ClientRoleType.clientRoleBroadcaster,
      ),
    );
  }

  //销毁
  Future<void> _dispose() async {
    if (_engine != null) {
      await _engine!.leaveChannel();
      await _engine!.release();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Consumer<TchRoomVM>(
      builder: (context, vm, _) {
        if (vm.students.isEmpty) {
          return Center(
            child: Text('准备中'),
          );
        }
        //选中的学生
        final activeStudent = vm.students.firstWhere((t) => t.userId == vm.activeSId);
        //其他学生
        final otherStudents = vm.students.where((t) => t.userId != vm.activeSId).toList()
          ..sort((a, b) => b.handup.compareTo(a.handup));

        return Padding(
          padding: const EdgeInsets.all(10),
          child: Row(
            spacing: 15,
            children: [
              Expanded(
                child: StudentItem(
                  user: activeStudent,
                  engine: _engine,
                ),
              ),
              SizedBox(
                width: 300,
                child: ListView.separated(
                  itemBuilder: (_, index) {
                    var item = otherStudents.elementAt(index);
                    return SizedBox(
                      height: 250,
                      child: StudentItem(
                        user: item,
                        engine: _engine,
                      ),
                    );
                  },
                  separatorBuilder: (_, __) => SizedBox(height: 15),
                  itemCount: otherStudents.length,
                ),
              ),
            ],
          ),
        );
      },
    );
  }
}