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/pages/components/vid_image.dart';
import 'package:fis_lib_report/pages/helpler.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:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class RInputImageList extends StatefulWidget {
  final InputImageList inputImageList;

  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;
  bool _hasImageBorder = false;
  final List<String> _images = [];
  double _height = 0.0;

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

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

  @override
  Widget build(BuildContext context) {
    return 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.all(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,
        ),
      ),
    );
  }

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

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

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

  void _initDatas() {
    inputImageList = widget.inputImageList;
    _hasImageBorder = inputImageList!.hasImageBorder!;
    _height = PtToPxConverter.ptToPx(inputImageList!.imageHeight) + 6;
    final element = ReportInfo.instance.getBlockElement(inputImageList!);
    if (element != null) {
      inputImageListInfo = element as InputImageListInfo;
      inputImageListInfo!.onSelect!.addListener((sender, e) {
        setState(() {
          if (_images.contains(e)) {
            _images.remove(e);
          } else {
            _images.add(e);
          }
          _child = _getChild();
        });
      });
    }
  }
}