mobile-app/lib/presentation/custom_widgets/widget_media_picker.dart

import 'dart:io';

import 'package:cached_network_image/cached_network_image.dart';
import 'package:farm_tpf/custom_model/Media.dart';
import 'package:farm_tpf/presentation/custom_widgets/camera_helper.dart';
import 'package:farm_tpf/presentation/custom_widgets/widget_show_video.dart';
import 'package:farm_tpf/presentation/custom_widgets/widget_utils.dart';
import 'package:farm_tpf/presentation/screens/actions/util_action.dart';
import 'package:farm_tpf/utils/const_assets.dart';
import 'package:farm_tpf/utils/const_common.dart';
import 'package:farm_tpf/utils/const_string.dart';
import 'package:file_picker/file_picker.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:image_picker/image_picker.dart';

import 'bloc/media_helper_bloc.dart';
import 'hoz_list_view.dart';

class WidgetMediaPicker extends StatefulWidget {
  final List<Media>? currentItems;
  final Function(List<String> addNewFilePaths, List<String> deleteFilePaths) onChangeFiles;
  WidgetMediaPicker({this.currentItems, required this.onChangeFiles});
  @override
  _WidgetMediaPickerState createState() => _WidgetMediaPickerState();
}

class _WidgetMediaPickerState extends State<WidgetMediaPicker> {
  List<Media> currentItems = [];
  List<String> addNewFilePaths = <String>[];
  List<String> deleteFilePaths = <String>[];
  final ImagePicker _picker = ImagePicker();

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

  @override
  Widget build(BuildContext context) {
    return BlocProvider<MediaHelperBloc>(
        create: (BuildContext contextA) => MediaHelperBloc()..add(ChangeListMedia(items: currentItems)),
        child: BlocBuilder<MediaHelperBloc, MediaHelperState>(builder: (contextB, state) {
          if (state is MediaHelperFailure) {
            return Container();
          } else if (state is MediaHelperSuccess) {
            currentItems = widget.currentItems ?? [];
            return Container(
                padding: EdgeInsets.all(8),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text('Hình ảnh/ Video', style: TextStyle(color: Colors.black54, fontSize: 16)),
                    SizedBox(
                      height: 8,
                    ),
                    Row(
                      children: [
                        InkWell(
                          child: Image.asset(
                            AppAssets.icAddMedia,
                            fit: BoxFit.contain,
                            width: 114,
                            height: 114,
                          ),
                          onTap: () {
                            showDialog(
                                context: context,
                                barrierDismissible: true,
                                builder: (context) => Opacity(
                                      child: multipleChoice(contextB),
                                      opacity: 1,
                                    ));
                          },
                        ),
                        SizedBox(
                          width: 8.0,
                        ),
                        Expanded(
                          child: _buildListPoster(),
                        ),
                      ],
                    ),
                  ],
                ));
          }
          return Container();
        }));
  }

  Widget multipleChoice(BuildContext context) {
    return CupertinoAlertDialog(
      title: Text(label_title_select_media),
      actions: <Widget>[
        CupertinoDialogAction(
            child: const Text('Chụp ảnh'),
            onPressed: () async {
              Navigator.pop(context, 'Discard');
              try {
                final image = await _picker.pickImage(source: ImageSource.camera, imageQuality: 90);
                if (image?.path != null) {
                  var imageFile = await UtilAction.compressImage(File(image?.path ?? ''));
                  print(imageFile.lengthSync());
                  if (imageFile.lengthSync() > ConstCommon.kFileSize) {
                    Utils.showSnackBarWarning(message: label_file_to_large);
                  } else {
                    Media newMedia = Media()
                      ..isVideo = false
                      ..isServerFile = false
                      ..pathFile = imageFile.path;
                    currentItems.add(newMedia);
                    addNewFilePaths.add(imageFile.path);
                    BlocProvider.of<MediaHelperBloc>(context)..add(ChangeListMedia(items: currentItems));
                    widget.onChangeFiles(addNewFilePaths, deleteFilePaths);
                  }
                }
              } catch (e) {
                print(e);
              }
            }),
        CupertinoDialogAction(
            child: const Text('Chọn ảnh'),
            onPressed: () async {
              Navigator.pop(context, 'Discard');
              FilePickerResult? result = await FilePicker.platform.pickFiles(type: FileType.image, allowMultiple: true);
              if (result != null) {
                var listFuture = <Future<File>>[];
                result.files.forEach((element) {
                  listFuture.add(UtilAction.compressImage(File(element.path ?? '')));
                });
                Future.wait(listFuture).then((values) {
                  bool isExistedFileTooLarge = false;
                  values.forEach((compressFile) {
                    if (compressFile.lengthSync() > ConstCommon.kFileSize) {
                      isExistedFileTooLarge = true;
                    } else {
                      Media newMedia = Media()
                        ..isVideo = false
                        ..isServerFile = false
                        ..pathFile = compressFile.path;
                      currentItems.add(newMedia);
                      addNewFilePaths.add(compressFile.path);
                    }
                  });
                  if (isExistedFileTooLarge) {
                    Utils.showSnackBarWarning(message: "Tập tin có kích thước lớn đã được loại bỏ.");
                  }
                  BlocProvider.of<MediaHelperBloc>(context)..add(ChangeListMedia(items: currentItems));
                  widget.onChangeFiles(addNewFilePaths, deleteFilePaths);
                });
              }
            }),
        // CupertinoDialogAction(
        //     child: const Text(label_select_video_from_library),
        //     onPressed: () async {
        //       Navigator.pop(context, 'Discard');
        //       FilePickerResult result = await FilePicker.platform
        //           .pickFiles(type: FileType.video, allowMultiple: true);

        //       if (result != null) {
        //         bool isExistedFileTooLarge = false;
        //         result.files?.forEach((videoFile) {
        //           if (videoFile.size * 1000 > ConstCommon.kFileSize) {
        //             isExistedFileTooLarge = true;
        //           } else {
        //             Media newMedia = Media()
        //               ..isVideo = true
        //               ..isServerFile = false
        //               ..pathFile = videoFile.path;
        //             currentItems.add(newMedia);
        //             addNewFilePaths.add(videoFile.path);
        //           }
        //         });
        //         if (isExistedFileTooLarge) {
        //           Utils.showSnackBarWarning(
        //               message: "Tập tin có kích thước lớn đã được loại bỏ.");
        //         }
        //         BlocProvider.of<MediaHelperBloc>(context)
        //           ..add(ChangeListMedia(items: currentItems));
        //         widget.onChangeFiles(addNewFilePaths, deleteFilePaths);
        //       }
        //     }),
        CupertinoDialogAction(
            child: const Text(label_cancel),
            textStyle: TextStyle(fontWeight: FontWeight.bold),
            isDefaultAction: true,
            onPressed: () {
              Navigator.pop(context, 'Cancel');
            }),
      ],
    );
  }

  _buildListPoster() {
    return BlocBuilder<MediaHelperBloc, MediaHelperState>(builder: (context, state) {
      if (state is MediaHelperSuccess) {
        return WrapContentHozListView(
            list: currentItems,
            itemBuilder: (context, index) {
              var item = currentItems[index];
              return Container(
                width: 120,
                height: 120,
                child: _WidgetItemMedia(
                    item: item,
                    deleteImage: (item) {
                      if (item.isServerFile) {
                        var url = item.pathFile?.replaceAll(ConstCommon.baseImageUrl, '');
                        deleteFilePaths.add(url ?? '');
                      }
                      addNewFilePaths.remove(item.pathFile);
                      currentItems.remove(item);
                      widget.onChangeFiles(addNewFilePaths, deleteFilePaths);
                      BlocProvider.of<MediaHelperBloc>(context).add(ChangeListMedia(items: currentItems));
                    }),
              );
            });
      }
      return Container();
    });
  }
}

class _WidgetItemMedia extends StatelessWidget {
  ItemMediaCallback deleteImage;
  final Media item;

  _WidgetItemMedia({required this.item, required this.deleteImage});

  void _showPhotoPreview(BuildContext context) {
    if (item.isVideo ?? false) return;

    showDialog(
      context: context,
      builder: (context) => Dialog(
        backgroundColor: Colors.transparent,
        insetPadding: EdgeInsets.all(20),
        child: Container(
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(16),
            boxShadow: [
              BoxShadow(
                color: Colors.black.withOpacity(0.1),
                blurRadius: 10,
                spreadRadius: 2,
              ),
            ],
          ),
          child: Stack(
            children: [
              Container(
                constraints: BoxConstraints(
                  maxHeight: MediaQuery.of(context).size.height * 0.7,
                ),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(16),
                  child: item.isServerFile
                      ? CachedNetworkImage(
                          imageUrl: item.pathFile ?? '',
                          fit: BoxFit.contain,
                          placeholder: (context, url) => Center(
                            child: CircularProgressIndicator(),
                          ),
                          errorWidget: (context, url, error) => Center(
                            child: Icon(Icons.error, color: Colors.red),
                          ),
                        )
                      : Image.file(
                          File(item.pathFile ?? ''),
                          fit: BoxFit.contain,
                        ),
                ),
              ),
              Positioned(
                top: 0,
                right: 0,
                child: Material(
                  color: Colors.transparent,
                  child: IconButton(
                    icon: Icon(Icons.close, color: Colors.black),
                    onPressed: () => Navigator.pop(context),
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.topRight,
      children: <Widget>[
        GestureDetector(
          onTap: () => _showPhotoPreview(context),
          child: Container(
            width: 120,
            height: 120,
            child: item.isVideo ?? false
                ? VideoWidget(
                    pathFile: item.pathFile ?? '',
                    isServerFile: item.isServerFile,
                    play: false,
                  )
                : Container(
                    margin: EdgeInsets.all(4.0),
                    decoration: BoxDecoration(
                      color: Colors.white,
                      border: Border.all(color: Colors.grey),
                      borderRadius: BorderRadius.all(
                        Radius.circular(8.0),
                      ),
                    ),
                    child: item.isServerFile
                        ? CachedNetworkImage(
                            placeholder: (context, url) => Icon(Icons.crop_original),
                            imageUrl: item.pathFile ?? '',
                          )
                        : Image.file(File(item.pathFile ?? '')),
                  ),
          ),
        ),
        Positioned(
          top: 0,
          right: 0,
          child: Material(
            color: Colors.transparent,
            child: IconButton(
              icon: Icon(
                Icons.delete,
                color: Colors.redAccent,
                size: 24,
              ),
              onPressed: () {
                print("On tap delete media");
                deleteImage(item);
              },
            ),
          ),
        )
      ],
    );
  }
}

typedef ItemMediaCallback = void Function(Media item);