import 'package:fis_measure/view/player/enums.dart';
import 'package:fis_measure/view/player/player.dart';
import 'package:fis_ui/index.dart';
import 'package:flutter/material.dart';
import 'package:flyinsono/architecture/define.dart';
import 'package:flyinsono/pages/remedical/report/report_edit/widgets/free_slider.dart';
import 'package:flyinsono/views/wechat_mini_program/wx_public_widgets/custom_image_file_loader.dart';
import 'package:flyinsono/views/wechat_mini_program/wx_public_widgets/wx_scaffold.dart';
import 'package:flyinsono/views/wechat_mini_program/wx_public_widgets/wx_screen_direction_container.dart';
import 'package:get/get.dart';

import 'index.dart';

class WxImagePreviewPage extends FisView<WxImagePreviewController> {
  const WxImagePreviewPage({Key? key}) : super(key: key);

  @override
  FWidget build(BuildContext context) {
    return FisBuilder<WxImagePreviewController>(
      builder: (_) {
        return WxScreenDirectionContainer(
          verticalLayout: WxScaffold(
            body: Container(color: Colors.black, child: _buildVerticalLayout()),
            title: "图像预览",
          ),
          horizontalLayout: _buildHorizontalLayout(),
          onDirectionChanged: controller.onScreenDirectionChange,
        );
      },
    );
  }

  // 竖屏视图
  Widget _buildVerticalLayout() {
    return Obx(() {
      if (controller.state.isPng)
        return Center(
          child: CustomImageLoader(
            fileToken: controller.pngFileToken,
          ),
        );
      return Stack(
        children: [
          FCenter(
            child: FContainer(
              padding: EdgeInsets.all(10),
              width: 50,
              height: 50,
              child: FCircularProgressIndicator(),
            ),
          ),
          controller.state.isControllerInitialized
              ? Offstage(
                  offstage: controller.state.isLoading,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Container(
                        constraints: BoxConstraints(
                          maxHeight: Get.height * 0.6,
                        ),
                        child: AspectRatio(
                          aspectRatio: controller.state.aspectRatio,
                          child: QuickFWidget(
                            VidPlayer(controller.playerController),
                          ),
                        ),
                      ),
                      _buildProgressBar(),
                    ],
                  ),
                )
              : Container(),
        ],
      );
    });
  }

  // 横屏视图
  Widget _buildHorizontalLayout() {
    return Obx(() {
      if (controller.state.isPng)
        return Container(
          color: Colors.black,
          child: Stack(
            children: [
              Center(
                child: CustomImageLoader(
                  fileToken: controller.pngFileToken,
                ),
              ),
              _buildBackButton()
            ],
          ),
        );
      return Container(
        color: Colors.black,
        child: Stack(
          children: [
            FCenter(
              child: FContainer(
                padding: EdgeInsets.all(10),
                width: 50,
                height: 50,
                child: FCircularProgressIndicator(),
              ),
            ),
            controller.state.isControllerInitialized
                ? Offstage(
                    offstage: controller.state.isLoading,
                    child: Center(
                      child: AspectRatio(
                        aspectRatio: controller.state.aspectRatio,
                        child: QuickFWidget(
                          VidPlayer(controller.playerController),
                        ),
                      ),
                    ),
                  )
                : Container(),
            Align(
              alignment: Alignment.bottomCenter,
              child: Container(height: 50, child: _buildProgressBar()),
            ),
            _buildBackButton()
          ],
        ),
      );
    });
  }

  Widget _buildBackButton() {
    return Align(
      alignment: Alignment.topLeft,
      child: InkWell(
        onTap: () => Get.back(),
        child: Container(
          margin: EdgeInsets.only(left: 20),
          height: 50,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Icon(
                Icons.arrow_back_ios,
                color: Colors.white,
              ),
              Text(
                "返回",
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  // 播放进度条组件
  Widget _buildProgressBar() {
    if (controller.state.isSingleFrame || controller.state.isLoading)
      return Container();
    return Row(
      children: [
        SizedBox(width: 10),
        Obx(() => IconButton(
              onPressed: controller.clickPlayButton,
              icon: FIcon(
                controller.state.isPlaying
                    ? Icons.pause
                    : Icons.play_circle_outline,
                size: 30,
                color: Colors.white,
              ),
              iconSize: 30,
            )),
        Expanded(
          child: FFreeSlider(
            onProcessChange: controller.onProcessChange,
            min: 0,
            max: controller.state.totalFramesCount.toDouble(),
            step: 1,
            value: controller.state.processValue.toDouble(),
            onChanged: (value) {
              if (controller.playerController.status == VidPlayStatus.play) {
                controller.playerController.pause();
              }
              controller.playerController.gotoFrame(value.toInt() - 1);
            },
          ),
        ),
        _buildProcessValue(),
      ],
    );
  }

  Widget _buildProcessValue() {
    return Obx(
      () => Text(
        "${controller.state.processValue}/${controller.state.totalFramesCount}",
        style: TextStyle(color: Colors.white),
      ),
    );
  }
}
