import 'package:agora_rtc_engine/agora_rtc_engine.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:wgshare/common/store/user_store.dart';

import '../../../utils/color_util.dart';
import 'meeting_main_video_logic.dart';
import 'meeting_main_video_state.dart';

class MeetingMainVideoComponent extends StatelessWidget {
  MeetingMainVideoComponent(
      {super.key,
      required this.rtcEngine,
      required this.channelId,
      required this.isOpenCamera,
      required this.remoteUid});

  final RtcEngine rtcEngine;
  final String channelId;
  final String remoteUid;
  final bool isOpenCamera;

  final MeetingMainVideoLogic logic = Get.put(MeetingMainVideoLogic());
  final MeetingMainVideoState state = Get.find<MeetingMainVideoLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: [
        PageView(
          scrollDirection: Axis.horizontal,
          reverse: false,
          controller: PageController(
            initialPage: 0,
            viewportFraction: 1,
            keepPage: true,
          ),
          physics: const BouncingScrollPhysics(),
          pageSnapping: true,
          onPageChanged: (index) {
            // 监听事件
            debugPrint('wgs输出===：$index');
          },
          children: <Widget>[
            Stack(
              alignment: Alignment.center,
              children: [
                remoteUid != ""
                    ? AgoraVideoView(
                        controller: VideoViewController.remote(
                          rtcEngine: rtcEngine,
                          canvas: VideoCanvas(uid: int.tryParse(remoteUid)),
                          connection: RtcConnection(channelId: channelId),
                        ),
                      )
                    : const CircularProgressIndicator(),
                Positioned(
                  bottom: 110,
                  child: Image.asset(
                    'assets/images/meeting_main_hang_up.png',
                    width: 50.w,
                    height: 50.h,
                  ),
                ),
                Positioned(
                  top: 16,
                  right: 16,
                  child: Container(
                    height: 30,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(8),
                        color: ColorUtil.Color_0_0_0_96),
                    padding: const EdgeInsets.only(left: 12, right: 12),
                    child: Row(
                      children: [
                        Text(
                          '正在讲话：',
                          style: TextStyle(
                              fontSize: 10.sp,
                              color: ColorUtil.Color_185_184_184),
                        ),
                        Image.asset(
                          'assets/images/meeting_main_speak2.png',
                          width: 20.w,
                          height: 20.h,
                        ),
                        Text(
                          '晓晓',
                          style: TextStyle(
                              fontSize: 10.sp,
                              color: ColorUtil.Color_185_184_184),
                        )
                      ],
                    ),
                  ),
                ),

                /// 右上角小窗
                Visibility(
                  visible: isOpenCamera,
                  child: Positioned(
                    top: 58,
                    right: 13,
                    child: Stack(
                      children: [
                        SizedBox(
                          width: 120,
                          height: 150,
                          child: Center(
                            child: isOpenCamera
                                ? AgoraVideoView(
                                    controller: VideoViewController(
                                      rtcEngine: rtcEngine,
                                      canvas: const VideoCanvas(uid: 0),
                                    ),
                                  )
                                : const CircularProgressIndicator(),
                          ),
                        ),
                        Positioned(
                          left: 4,
                          bottom: 4,
                          child: Row(
                            children: [
                              Image.asset(
                                'assets/images/meeting_main_own.png',
                                width: 20.w,
                                height: 15.h,
                              ),
                              Container(
                                height: 15,
                                margin: const EdgeInsets.only(left: 4),
                                padding:
                                    const EdgeInsets.only(left: 4, right: 4),
                                decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(2),
                                    color: ColorUtil.Color_0_0_0_96),
                                child: Row(
                                  children: [
                                    /*Image.asset(
                                      'assets/images/meeting_main_microphone_open.png',
                                      width: 13.w,
                                      height: 14.h,
                                    ),
                                    SizedBox(width: 4.w),*/
                                    Text(
                                      UserStore
                                          .to.userInfoEntity.value!.userName,
                                      style: TextStyle(
                                          fontSize: 10.sp,
                                          color: ColorUtil.Color_185_184_184),
                                    )
                                  ],
                                ),
                              )
                            ],
                          ),
                        )
                      ],
                    ),
                  ),
                )
              ],
            ),
            Container(
              color: ColorUtil.Color_57_57_57,
              child: GridView.builder(
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 2,
                      childAspectRatio: 0.8,
                      crossAxisSpacing: 0),
                  itemCount: 5,
                  itemBuilder: (BuildContext ctx, index) {
                    return Stack(
                      children: [
                        Container(
                            padding: const EdgeInsets.only(left: 12, right: 12),
                            decoration: BoxDecoration(
                              image: DecorationImage(
                                fit: BoxFit.fill,
                                image: NetworkImage(
                                  "https://tse1-mm.cn.bing.net/th/id/OIP-C.hdhK40Dw3yN_2mjNQNqFCgAAAA?w=186&h=186&c=7&r=0&o=5&pid=1.7",
                                ),
                              ),
                            )),
                        Positioned(
                          left: 4,
                          bottom: 4,
                          child: Row(
                            children: [
                              Image.asset(
                                'assets/images/meeting_main_own.png',
                                width: 20.w,
                                height: 15.h,
                              ),
                              Container(
                                height: 15,
                                margin: const EdgeInsets.only(left: 4),
                                padding:
                                    const EdgeInsets.only(left: 4, right: 4),
                                decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(2),
                                    color: ColorUtil.Color_0_0_0_96),
                                child: Row(
                                  children: [
                                    Image.asset(
                                      'assets/images/meeting_main_microphone_open.png',
                                      width: 13.w,
                                      height: 14.h,
                                    ),
                                    SizedBox(width: 4.w),
                                    Text(
                                      '晓晓',
                                      style: TextStyle(
                                          fontSize: 10.sp,
                                          color: ColorUtil.Color_185_184_184),
                                    )
                                  ],
                                ),
                              )
                            ],
                          ),
                        )
                      ],
                    );
                  }),
            ),
          ],
        ),
        Positioned(
          bottom: 16,
          child: Row(
            children: [
              Container(
                width: 8.w,
                height: 8.h,
                margin: const EdgeInsets.only(right: 6),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(8),
                    color: ColorUtil.Color_255_255_255),
              ),
              Container(
                width: 8.w,
                height: 8.h,
                margin: const EdgeInsets.only(left: 6),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(8),
                    color: ColorUtil.Color_108_108_108),
              )
            ],
          ),
        ),
      ],
    );
  }

  @override
  void dispose() {
    Get.delete<MeetingMainVideoLogic>();
  }
}