import 'package:fis_lib_media_rt/implementations/trtc/channel.dart';
import 'package:fis_lib_media_rt/implementations/trtc/widgets/remote_merged_view_sub.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import '../interface/channel.dart';

/// 实时画面视图（合图模式）旧版超声机
class FRTMergedChannelViewOldVersion extends StatelessWidget {
  /// 播放路源
  final IPlayChannel channel;

  /// 指定尺寸
  final Size? size;

  /// 总视频帧尺寸
  final Size videoSize;

  /// 视图尺寸
  final Size viewSize;

  /// 视图对齐方式
  final AlignmentGeometry viewAlignment;

  /// 是否是子视图
  final bool isSubView;

  /// 主视图外部容器最大尺寸
  final Size? mainViewContainerMaxSize;

  const FRTMergedChannelViewOldVersion(
    this.channel, {
    super.key,
    this.size,
    this.mainViewContainerMaxSize,
    required this.isSubView,
    required this.videoSize,
    required this.viewSize,
    required this.viewAlignment,
  });

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (_, constraints) {
      // 为了使得移动端上的Texture纹理渲染正常，此处的主画面容器需要写死为1280x720
      Size displayViewSize =
          (kIsWeb || isSubView) ? viewSize : const Size(1280, 720);
      // 是否使用高度缩放
      final bool isHeightConstraint =
          constraints.maxWidth / constraints.maxHeight >
              displayViewSize.width / displayViewSize.height;
      double scale = isHeightConstraint
          ? videoSize.height / displayViewSize.height
          : videoSize.width / displayViewSize.width;

      /// 视图宽高比
      final double viewRatio = displayViewSize.width / displayViewSize.height;

      /// PC 端主视图是否依赖高度缩放
      // final bool isMainViewHeightConstraint = mainViewContainerMaxSize ==
      //         null ||
      //     mainViewContainerMaxSize!.width / mainViewContainerMaxSize!.height >
      //         displayViewSize.width / displayViewSize.height;

      /// Container 的尺寸需要缩小，来满足视图的宽高比，要么宽度缩小，要么高度缩小
      final Size containerSize = viewRatio < 1
          ? Size(
              constraints.maxHeight * viewRatio,
              constraints.maxHeight,
            )
          : Size(
              constraints.maxWidth,
              constraints.maxWidth / viewRatio,
            );
      // Offset extraOffset = Offset.zero;

      /// 如果推流的超声机画面小于1280x720，那么需要在移动端上进行额外缩放和位移
      if (!isSubView && !kIsWeb) {
        double extraScale = 1;
        // 判断是否是需要缩放
        const canvasAspectRatio = 1280 / 720;
        final imageAspectRatio = viewSize.width / viewSize.height;
        if (canvasAspectRatio < imageAspectRatio) {
          // 画布较宽，需要调整图像宽度以适应画布宽度
          extraScale = 1280 / viewSize.width;
          // extraOffset = Offset(
          //   0,
          //   (720 - viewSize.height * extraScale) / 2 / 720,
          // );
        } else {
          // 画布较高，需要调整图像高度以适应画布高度
          extraScale = 720 / viewSize.height;
          // extraOffset = Offset(
          //   (1280 - viewSize.width * extraScale) / 2 / 1280,
          //   0,
          // );
        }
        scale = scale * extraScale;
      }
      return kIsWeb
          ? _buildMergedWebCameraView(containerSize, scale)
          : const Text("native view not support yet");
    });
  }

  Widget _buildMergedWebCameraView(Size containerSize, double scale) {
    return Container(
      color: Colors.black,
      width: containerSize.width,
      height: containerSize.height,
      child: ClipRect(
        child: Stack(
          children: [
            FractionalTranslation(
              translation: const Offset(0, 0),
              child: Transform.scale(
                alignment: Alignment.topLeft,
                scale: 1,
                child: TrtcRemoteMergedViewSub(
                  channel as TrtcPlayChannel,
                  isNeedScaleY: true,
                ),
              ),
            ),
            // FractionalTranslation(
            //   translation: const Offset(0, -0.496),
            //   child: Transform.scale(
            //     alignment: Alignment.bottomLeft,
            //     scale: 2,
            //     child: TrtcRemoteMergedViewSub(channel as TrtcPlayChannel),
            //   ),
            // ),
          ],
        ),
      ),
    );
  }
}
