import 'package:fis_ui/index.dart';
import 'package:flutter/material.dart';
import 'package:flyinsono/architecture/define.dart';
import 'package:get/get.dart';
import 'package:daniulive/views/play_view.dart';
import 'package:daniulive/views/merge_play_view/sub_view.dart';
import '../controller.dart';

class DaniuDeviceLiveSubView extends FStatelessWidget {
  DaniuDeviceLiveSubView() {
    controller = Get.find<DeviceLiveDetailMobileController>();
  }
  late final DeviceLiveDetailMobileController controller;

  @override
  FWidget build(BuildContext context) {
    return QuickFWidget(
      Obx(
        () {
          /// 支持 nodeplayer 拉流或者子窗口不存在，则不显示大牛子窗口
          if (controller.state.isSupportNodePlayer ||
              !controller.state.isRtmpSubViewExist) {
            return Container();
          }
          return Align(
            alignment: controller.state.isDaniuSubViewAlignRight
                ? Alignment.topRight
                : Alignment.topLeft,
            child: Container(
              width: 200,
              decoration: BoxDecoration(
                border: Border.all(
                    color: controller.state.isDaniuSubViewExpanded
                        ? Colors.grey
                        : Colors.transparent,
                    width: 1),
              ),
              child: AspectRatio(
                aspectRatio: controller.state.rtmpSubViewWidth /
                    controller.state.rtmpSubViewHeight,
                child: Stack(
                  children: [
                    Offstage(
                      offstage: !controller.state.isDaniuSubViewExpanded,
                      child: _buildSubViewPlayer(),
                    ),
                    _buildSwitchButton(),
                    _buildFoldButton(),
                  ],
                ),
              ),
            ),
          );
        },
      ),
    );
  }

  Widget _buildSubViewPlayer() {
    return Obx(() {
      if (controller.state.isRtmpUseMerge) {
        return MergePlaySubView(
          userId: "DeviceMainChannel",
          controller: controller.mergePlayController!,
          mainViewSize: Size(controller.state.rtmpMainViewWidth.toDouble(),
              controller.state.rtmpMainViewHeight.toDouble()),
          subViewSize: Size(controller.state.rtmpSubViewWidth.toDouble(),
              controller.state.rtmpSubViewHeight.toDouble()),
          isOldPlatform: controller.state.isOldPlatform,
        );
      } else {
        return PlayView(
          controller: controller.subViewPlayController!,
          onViewCreated: (value) {
            // widget.channel.viewId = value;
            print("onViewCreated: $value");
            controller.subViewPlayController!.play();
          },
        );
      }
    });
  }

  Widget _buildSwitchButton() {
    return Obx(() {
      return Offstage(
        offstage: !controller.state.isDaniuSubViewExpanded,
        child: Align(
          alignment: controller.state.isDaniuSubViewAlignRight
              ? Alignment.topLeft
              : Alignment.topRight,
          child: InkWell(
            onTap: controller.switchSubViewPosition,
            child: Container(
              // alignment: Alignment.topRight,
              height: 25,
              width: 30,
              color: Colors.grey,
              child: Icon(
                Icons.sync_alt,
                color: Colors.white,
              ),
            ),
          ),
        ),
      );
    });
  }

  Widget _buildFoldButton() {
    return Obx(() {
      if (controller.state.isDaniuSubViewAlignRight) {
        return Align(
          alignment: Alignment.topRight,
          child: InkWell(
            onTap: controller.foldSubView,
            child: Container(
              // alignment: Alignment.topRight,
              height: 25,
              width: 30,
              color: Colors.grey,
              child: Icon(
                Icons.remove,
                color: Colors.white,
              ),
            ),
          ),
        );
      } else {
        return Container();
      }
    });
  }
}
