import 'package:fis_lib_report/converts/margin_convert.dart';
import 'package:fis_lib_report/converts/pt_to_px_converter.dart';
import 'package:fis_lib_report/report/inputImageList.dart';
import 'package:fis_lib_report/report_info/input_image_list_info.dart';
import 'package:fis_lib_report/report_info/report_info.dart';
import 'package:fis_ui/business/vid_img_view/index.dart';
import 'package:flutter/material.dart';

class RInputImageList extends StatefulWidget {
  final InputImageList inputImageList;

  const RInputImageList(this.inputImageList);
  @override
  State<StatefulWidget> createState() {
    return _RInputImageListState();
  }
}

class _RInputImageListState extends State<RInputImageList> {
  InputImageList? inputImageList;

  InputImageListInfo? _inputImageListInfo;
  Color _borderColor = Colors.grey;
  bool _isSelected = false;
  List<String> _images = [];
  double _height = 0.0;

  Widget _child = const Text('请点击此处后选择图片');

  @override
  initState() {
    _initDatas();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    _checkInputImageListInfo();
    return SizedBox(
      width: PtToPxConverter.ptToPx(
          inputImageList!.imageWidth! * inputImageList!.column!),
      child: MouseRegion(
        cursor: SystemMouseCursors.click,
        child: GestureDetector(
          onTap: () {
            if (_isSelected) {
              setState(() {
                _borderColor = Colors.grey;
                _isSelected = false;
                _inputImageListInfo!.isSelected = false;
              });
            } else {
              setState(() {
                _borderColor = const Color.fromARGB(255, 64, 159, 248);
                _isSelected = true;
                _inputImageListInfo!.isSelected = true;
              });
            }
          },
          child: Container(
            padding: const EdgeInsets.symmetric(vertical: 3),
            height: _height,
            width: PtToPxConverter.ptToPx(
                inputImageList!.imageWidth! * inputImageList!.column!),
            alignment: Alignment.center,
            margin: MarginConvert.marginConvert(inputImageList!.margin),
            decoration: BoxDecoration(
                border: _isSelected
                    ? Border.all(
                        width: 0.5,
                        color: _borderColor,
                      )
                    : null,
                color: Colors.transparent),
            child: _child,
          ),
        ),
      ),
    );
  }

  @override
  void dispose() {
    _inputImageListInfo!.onSelect!.dispose();
    super.dispose();
  }

  Widget _getChild() {
    if (_images.isNotEmpty) {
      final rowCount = (_images.length / inputImageList!.column!).ceil();
      _height = rowCount *
              (PtToPxConverter.ptToPx(inputImageList!.imageHeight! + 2)) +
          rowCount;
      return GridView.builder(
        primary: true,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: inputImageList!.column!,
          crossAxisSpacing: 1,
          mainAxisSpacing: 1,
          childAspectRatio:
              inputImageList!.imageWidth! / inputImageList!.imageHeight!,
        ),
        itemCount: _images.length,
        itemBuilder: (BuildContext context, int index) {
          return VidImageView(
            url: _images[index],
            fit: BoxFit.fill,
            width: PtToPxConverter.ptToPx(inputImageList!.imageWidth!) - 20,
          );
        },
      );
    } else {
      _height = PtToPxConverter.ptToPx(inputImageList!.imageHeight!) + 9;
    }

    return const Text('请点击此处后选择图片');
  }

  void _addSelectImageListening() {
    try {
      _inputImageListInfo!.onSelectedChange.addListener((sender, e) {
        if (mounted) {
          setState(() {
            _images = e;
            _child = _getChild();
          });
        }
      });
    } catch (e) {
      print(e);
    }
  }

  void _addOnSelectedListening() {
    _inputImageListInfo!.onSelect!.addListener((sender, e) {
      setState(() {
        if (_images.contains(e)) {
          _images.remove(e);
          if (_inputImageListInfo!.selectedImages.contains(e)) {
            _inputImageListInfo!.selectedImages.remove(e);
          }
        } else {
          _images.add(e);
          if (!_inputImageListInfo!.selectedImages.contains(e)) {
            _inputImageListInfo!.selectedImages.add(e);
          }
        }
        _child = _getChild();
      });
    });
  }

  void _initDatas() {
    inputImageList = widget.inputImageList;
    _height = PtToPxConverter.ptToPx(inputImageList!.imageHeight) + 6;
    final element = ReportInfo.instance.getBlockElement(inputImageList!);
    if (element != null) {
      _inputImageListInfo = element as InputImageListInfo;
      _addOnSelectedListening();
      _addSelectImageListening();
    }
  }

  void _checkInputImageListInfo() {
    if (_inputImageListInfo != null) {
      final imageInfo = ReportInfo.instance
          .getBlockElement(widget.inputImageList) as InputImageListInfo;
      if (imageInfo != _inputImageListInfo) {
        if (_inputImageListInfo != null) {
          _inputImageListInfo!.onSelectedChange.dispose();
        }
        _inputImageListInfo = imageInfo;
        _addSelectImageListening();
        setState(() {
          _images.clear();
          _isSelected = false;
          _child = _getChild();
        });
        _addOnSelectedListening();
      }
    }
  }
}