import 'package:fis_jsonrpc/rpc.dart';
import 'package:fis_theme/theme.dart';
import 'package:fis_ui/index.dart';
import 'package:fis_ui/interface/interactive_container.dart';
import 'package:flutter/material.dart';
import 'package:flyinsono/architecture/define.dart';
import 'package:flyinsono/pages/remedical/report/report_edit/controller.dart';
import 'package:flyinsono/pages/remedical/vocabulary_entry/widgets/entries_item.dart';
import 'package:get/get.dart';

import 'consultation_image_view.dart';
import 'quick_preview_plugin.dart';

class ConsultationImagesView extends FStatefulWidget
    implements FInteractiveContainer {
  @override
  String get pageName => 'ConsultationImagesView';
  @override
  FState<FStatefulWidget> createState() {
    return _ConsultationImagesState();
  }
}

class _ConsultationImagesState extends FState<ConsultationImagesView> {
  final controller = Get.find<ReportEditController>();

  @override
  FWidget build(BuildContext context) {
    return FExpanded(
      child: FObx(
        () {
          if (controller.state.consultationImages.isEmpty) {
            return FCenter(
              child: NoDataWidget(),
            );
          }
          return FContainer(
            margin: EdgeInsets.only(right: 10, top: 10),
            child: FGridView.builder(
              itemCount: controller.state.consultationImages.length,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                crossAxisSpacing: 10.0,
                mainAxisSpacing: 10.0,
              ),
              itemBuilder: (BuildContext context, int index) {
                return _buildConsultationImageView(context, index);
              },
            ),
          );
        },
      ),
    );
  }

  FWidget _buildConsultationImageView(BuildContext context, int index) {
    var imageInfo = controller.state.consultationImages[index];
    return FObx(
      () => FContainer(
        height: MediaQuery.of(context).size.width,
        decoration: BoxDecoration(
          border: Border.all(
              width: 4,
              color: controller.state.selectedImages
                      .contains(imageInfo.coverImageUrl)
                  ? FTheme.ins.colorScheme.primary
                  : Colors.transparent),
          color: Colors.black,
        ),
        child: FMouseRegion(
          cursor: SystemMouseCursors.click,
          child: FGestureDetector(
            name: 'ConsultationImage',
            businessParent: widget,
            onTap: () {
              controller
                  .onConsultationImageSelected(imageInfo.coverImageUrl ?? '');
            },
            onDoubleTap: () {
              Get.to(
                () => ConsultationImagePage(imageInfo),
              );
            },
            child: FStack(
              children: [
                _buildImageContent(imageInfo.previewImageUrl ?? ''),

                ///视频则有播放图标
                if ([
                  RemedicalFileDataTypeEnum.VinnoVidMovie,
                  RemedicalFileDataTypeEnum.ThirdVidMovie,
                ].contains(imageInfo.fileDataType)) ...[
                  _buildPlayIcon(),
                ],

                ///快速预览图标
                _buildPreviewPlugin(imageInfo),

                ///序号
                _buildIndex(index),
              ],
            ),
          ),
        ),
      ),
    );
  }

  FWidget _buildPlayIcon() {
    return FPositioned(
      left: 0,
      right: 0,
      top: 0,
      bottom: 0,
      child: FCenter(
        child: FIcon(
          Icons.play_circle_outline_rounded,
          color: Colors.white,
          size: 50,
        ),
      ),
    );
  }

  FWidget _buildPreviewPlugin(ConsultationFileDTO imageInfo) {
    return FPositioned(
      top: 10,
      right: 5,
      child: FQuickPreviewPlugin(
        vidUrl: imageInfo.sourceUrl ?? '',
        imageUrl: imageInfo.coverImageUrl ?? '',
        child: FIcon(
          Icons.zoom_in,
          color: Colors.white,
          size: 32,
        ),
      ),
    );
  }

  FWidget _buildIndex(int index) {
    return FPositioned(
      top: 10,
      left: 5,
      child: FText(
        (index + 1).toString(),
        style: TextStyle(
          color: Colors.white,
        ),
      ),
    );
  }

  FWidget _buildImageContent(String previewImageUrl) {
    return FPositioned(
      left: 0,
      right: 0,
      top: 0,
      bottom: 0,
      child: FImage(
        image: NetworkImage(
          previewImageUrl,
        ),
      ),
    );
  }
}
