import 'package:fis_ui/base_define/page.dart';
import 'package:fis_ui/index.dart';
import 'package:flutter/material.dart';
import 'package:flyinsono/architecture/define.dart';
import 'package:flyinsono/views/mobile/device_live/device_live_detail/widgets/daniu_device_live_panel.dart';
import 'package:flyinsono/views/mobile/device_live/device_live_detail/widgets/daniu_device_live_sub_view.dart';

import 'controller.dart';
import 'widgets/nodeplayer_device_live_panel.dart';

class DeviceLiveDetailMobilePage
    extends FisView<DeviceLiveDetailMobileController> implements FPage {
  @override
  final String pageName = "MobileDeviceLiveDetailPage";

  @override
  FWidget build(BuildContext context) {
    return FScaffold(
      backgroundColor: Colors.black,
      body: FSafeArea(
        top: false,
        bottom: false,
        // right: false,
        child: FStack(
          children: [
            FObx(() {
              if (controller.state.isLiveInfoInited) {
                return _buildLivePanel();
              } else {
                return FCenter(
                  child: FSizedBox(
                    width: 26,
                    height: 26,
                    child: FCircularProgressIndicator(),
                  ),
                );
              }
            }),
            FObx(() {
              if (controller.state.isLiveInfoInited) {
                return DaniuDeviceLiveSubView();
              } else {
                return FCenter(
                  child: FSizedBox(
                    width: 26,
                    height: 26,
                    child: FCircularProgressIndicator(),
                  ),
                );
              }
            }),
            FObx(() {
              if (controller.state.isLiveInfoInited &&
                  controller.state.isDaniuLiveFirstFrameRendered) {
                return FContainer();
              } else {
                return FCenter(
                  child: FSizedBox(
                    width: 26,
                    height: 26,
                    child: FCircularProgressIndicator(),
                  ),
                );
              }
            }),
            FPositioned(
              child: FInkWell(
                onTap: () {
                  controller.handlePageBack();
                },
                child: FContainer(
                  decoration: BoxDecoration(
                    color: Colors.white.withOpacity(.4),
                    borderRadius: BorderRadius.circular(22),
                  ),
                  padding: const EdgeInsets.all(8),
                  margin: const EdgeInsets.only(top: 4, left: 4),
                  child: const FIcon(
                    Icons.close,
                    size: 28,
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  FWidget _buildLivePanel() {
    return FObx(() {
      if (controller.state.isSupportNodePlayer)
        return NodePlayerDeviceLivePanel();
      else
        return DaniuDeviceLivePanel();
    });
  }
}
