TF-1801 Add attachment list body builder

(cherry picked from commit 28da0d8a32f5b445d71cc3d00ea6885c8c719a69)

lib/features/email/presentation/controller/single_email_controller.dart

@@ -96,6 +96,7 @@ class SingleEmailController extends BaseController with AppLoaderMixin {
   final _uuid = Get.find<Uuid>();
   final _downloadManager = Get.find<DownloadManager>();
   final _dynamicUrlInterceptors = Get.find<DynamicUrlInterceptors>();
+  final _attachmentListScrollController = ScrollController();
 
   final GetEmailContentInteractor _getEmailContentInteractor;
   final MarkAsEmailReadInteractor _markAsEmailReadInteractor;
@@ -151,6 +152,7 @@ class SingleEmailController extends BaseController with AppLoaderMixin {
   @override
   void onClose() {
     _downloadProgressStateController.close();
+    _attachmentListScrollController.dispose();
     super.onClose();
   }
 
@@ -1343,7 +1345,7 @@ class SingleEmailController extends BaseController with AppLoaderMixin {
 
   void openAttachmentList(BuildContext context, List<Attachment> attachments) {
     if (responsiveUtils.isMobile(context)) {
-      (AttachmentListBottomSheetBuilder(context, attachments, imagePaths)
+      (AttachmentListBottomSheetBuilder(context, attachments, imagePaths, _attachmentListScrollController)
         ..onCloseButtonAction(() => popBack())
         ..onDownloadAttachmentFileAction((attachment) {
           if (PlatformInfo.isWeb) {
@@ -1359,17 +1361,21 @@ class SingleEmailController extends BaseController with AppLoaderMixin {
         barrierColor: AppColor.colorDefaultCupertinoActionSheet,
         builder: (BuildContext context) => 
           PointerInterceptor(
-            child: (AttachmentListDialogBuilder(context, imagePaths, attachments, responsiveUtils)
+            child: AttachmentListDialogBuilder(
-              ..backgroundColor(Colors.black.withAlpha(24))
+              imagePaths: imagePaths,
-              ..onCloseButtonAction(() => popBack())
+              attachments: attachments,
-              ..onDownloadAttachmentFileAction((attachment) {
+              responsiveUtils: responsiveUtils,
+              scrollController: _attachmentListScrollController,
+              backgroundColor: Colors.black.withAlpha(24),
+              onCloseButtonAction: () => popBack(),
+              onDownloadAttachmentFileAction: (attachment) {
                 if (PlatformInfo.isWeb) {
                   downloadAttachmentForWeb(context, attachment);
                 } else {
                   exportAttachment(context, attachment);
                 }
-              })
+              }
-            ).build()
+            )
           )
       );
     }

lib/features/email/presentation/styles/attachment/attachment_list_styles.dart

@@ -34,6 +34,8 @@ class AttachmentListStyles {
     horizontal: 24.0,
     vertical: 12.0
   );
+  static const EdgeInsetsGeometry closeButtonPadding = EdgeInsets.all(12.0);
+  static const EdgeInsetsGeometry actionButtonsRowPadding = EdgeInsets.only(top: 12);
 
   static const Color bodyBackgroundColor = Colors.white;
   static const Color headerBorderColor = AppColor.colorDividerEmailView;

lib/features/email/presentation/widgets/attachment_list/attachment_list_action_button_builder.dart

@@ -0,0 +1,44 @@
+import 'package:flutter/material.dart';
+import 'package:tmail_ui_user/features/email/presentation/styles/attachment/attachment_list_styles.dart';
+
+class AttachmentListActionButtonBuilder extends StatelessWidget {
+  final String? name;
+  final TextStyle? textStyle;
+  final Color? bgColor;
+  final Color? borderColor;
+  final Function? action;
+
+  const AttachmentListActionButtonBuilder({
+    super.key,
+    this.name,
+    this.textStyle,
+    this.bgColor,
+    this.borderColor,
+    this.action
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return InkWell(
+      onTap: () => action?.call(),
+      child: Container(
+        padding: AttachmentListStyles.buttonsPadding,
+        decoration: BoxDecoration(
+            color: bgColor,
+            borderRadius: AttachmentListStyles.buttonRadius,
+            border: Border.all(
+                width: borderColor != null ? AttachmentListStyles.buttonBorderWidth : 0,
+                color: borderColor ?? Colors.transparent
+            )
+        ),
+        child: Center(
+          child: Text(
+              name ?? '',
+              textAlign: TextAlign.center,
+              style: textStyle
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/features/email/presentation/widgets/attachment_list/attachment_list_bottom_sheet_body_builder.dart

@@ -0,0 +1,159 @@
+import 'package:core/presentation/resources/image_paths.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:model/email/attachment.dart';
+import 'package:pointer_interceptor/pointer_interceptor.dart';
+import 'package:tmail_ui_user/features/email/presentation/styles/attachment/attachment_list_styles.dart';
+import 'package:tmail_ui_user/features/email/presentation/widgets/attachment_list/attachment_list_action_button_builder.dart';
+import 'package:tmail_ui_user/features/email/presentation/widgets/attachment_list/attachment_list_bottom_sheet_builder.dart';
+import 'package:tmail_ui_user/features/email/presentation/widgets/attachment_list/attachment_list_item_widget.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+class AttachmentListBottomSheetBodyBuilder extends StatelessWidget {
+  final ImagePaths imagePaths;
+  final List<Attachment> attachments;
+  final double statusBarHeight;
+  final ScrollController scrollController;
+  final OnDownloadAllButtonAction? onDownloadAllButtonAction;
+  final OnDownloadAttachmentFileAction? onDownloadAttachmentFileAction;
+  final OnCancelButtonAction? onCancelButtonAction;
+  final OnCloseButtonAction? onCloseButtonAction;
+
+  const AttachmentListBottomSheetBodyBuilder({
+    super.key,
+    required this.imagePaths,
+    required this.attachments,
+    required this.statusBarHeight,
+    required this.scrollController,
+    this.onDownloadAllButtonAction,
+    this.onDownloadAttachmentFileAction,
+    this.onCancelButtonAction,
+    this.onCloseButtonAction,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return PointerInterceptor(
+      child: SafeArea(
+        top: true,
+        bottom: false,
+        left: false,
+        right: false,
+        child: GestureDetector(
+          onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
+          child: Padding(
+            padding: EdgeInsets.only(top: statusBarHeight),
+            child: ClipRRect(
+              borderRadius: AttachmentListStyles.modalRadius,
+              child: Scaffold(
+                appBar: AppBar(
+                  leading: const SizedBox.shrink(),
+                  title: Row(
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    children: [
+                      Text(
+                        AppLocalizations.of(context).attachmentList,
+                        style: AttachmentListStyles.titleTextStyle
+                      ),
+                      const SizedBox(width: AttachmentListStyles.titleSpace),
+                      Text(
+                        '${attachments.length} ${AppLocalizations.of(context).files}',
+                        style: AttachmentListStyles.subTitleTextStyle
+                      ),
+                    ],
+                  ),
+                  centerTitle: true,
+                  actions: [
+                    GestureDetector(
+                      child: Padding(
+                        padding: AttachmentListStyles.closeButtonPadding,
+                        child: SvgPicture.asset(imagePaths.icCircleClose),
+                      ),
+                      onTapDown: (_) {
+                        onCloseButtonAction?.call();
+                      },
+                    )
+                  ],
+                ),
+                body: Container(
+                  decoration: AttachmentListStyles.dialogBodyDecorationMobile,
+                  child: Column(
+                    children: [
+                      Expanded(
+                        child: Padding(
+                          padding: AttachmentListStyles.listAreaPaddingMobile,
+                          child: RawScrollbar(
+                            trackColor: AttachmentListStyles.scrollbarTrackColor,
+                            thumbColor: AttachmentListStyles.scrollbarThumbColor,
+                            radius: AttachmentListStyles.scrollbarThumbRadius,
+                            trackRadius: AttachmentListStyles.scrollbarTrackRadius,
+                            thickness: AttachmentListStyles.scrollbarThickness,
+                            thumbVisibility: true,
+                            trackVisibility: true,
+                            controller: scrollController,
+                            trackBorderColor: AttachmentListStyles.scrollbarTrackBorderColor,
+                            child: Padding(
+                              padding: AttachmentListStyles.listItemPadding,
+                              child: ScrollConfiguration(
+                                behavior: ScrollConfiguration.of(context).copyWith(scrollbars: false),
+                                child: ListView.separated(
+                                  controller: scrollController,
+                                  shrinkWrap: true,
+                                  physics: const ScrollPhysics(),
+                                  itemCount: attachments.length,
+                                  itemBuilder: (context, index) {
+                                    return AttachmentListItemWidget(
+                                      attachment: attachments[index],
+                                      downloadAttachmentAction: onDownloadAttachmentFileAction,
+                                    );
+                                  },
+                                  separatorBuilder: (context, index) {
+                                    return const Padding(
+                                      padding: AttachmentListStyles.separatorPadding,
+                                      child: Divider(
+                                        height: AttachmentListStyles.separatorHeight,
+                                        color: AttachmentListStyles.separatorColor,
+                                      ),
+                                    );
+                                  },
+                                ),
+                              ),
+                            ),
+                          ),
+                        ),
+                      ),
+                      Padding(
+                        padding: AttachmentListStyles.actionButtonsRowPadding,
+                        child: Row(
+                          mainAxisAlignment: MainAxisAlignment.center,
+                          children: [
+                            if (onDownloadAllButtonAction != null)
+                              AttachmentListActionButtonBuilder(
+                                name: AppLocalizations.of(context).downloadAll,
+                                bgColor: AttachmentListStyles.downloadAllButtonColor,
+                                textStyle: AttachmentListStyles.downloadAllButtonTextStyle
+                              ),
+                            if (onDownloadAllButtonAction != null && onCancelButtonAction != null)
+                              const SizedBox(width: AttachmentListStyles.buttonsSpaceBetween),
+                            if (onCancelButtonAction != null)
+                              AttachmentListActionButtonBuilder(
+                                name: AppLocalizations.of(context).close,
+                                bgColor: AttachmentListStyles.cancelButtonColor,
+                                borderColor: AttachmentListStyles.cancelButtonBorderColor,
+                                textStyle: AttachmentListStyles.cancelButtonTextStyle
+                              )
+                          ],
+                        ),
+                      ),
+                      const SizedBox(height: AttachmentListStyles.dialogBottomSpace)
+                    ],
+                  ),
+                ),
+              ),
+            ),
+          ),
+        )
+      ),
+    );
+  }
+}

lib/features/email/presentation/widgets/attachment_list/attachment_list_bottom_sheet_builder.dart

@@ -1,12 +1,9 @@
 import 'package:core/presentation/resources/image_paths.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
 import 'package:model/email/attachment.dart';
-import 'package:pointer_interceptor/pointer_interceptor.dart';
 import 'package:tmail_ui_user/features/email/presentation/styles/attachment/attachment_list_styles.dart';
-import 'package:tmail_ui_user/features/email/presentation/widgets/attachment_list/attachment_list_item_widget.dart';
+import 'package:tmail_ui_user/features/email/presentation/widgets/attachment_list/attachment_list_bottom_sheet_body_builder.dart';
-import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
 typedef OnDownloadAttachmentFileAction = void Function(Attachment attachment);
 typedef OnDownloadAllButtonAction = void Function();
@@ -17,6 +14,7 @@ class AttachmentListBottomSheetBuilder {
   final BuildContext _context;
   final List<Attachment> _attachments;
   final ImagePaths _imagePaths;
+  final ScrollController _scrollController;
 
   late double _statusBarHeight;
 
@@ -29,6 +27,7 @@ class AttachmentListBottomSheetBuilder {
     this._context,
     this._attachments,
     this._imagePaths,
+    this._scrollController,
   ) {
     _statusBarHeight = Get.statusBarHeight / MediaQuery.of(_context).devicePixelRatio;
   }
@@ -56,161 +55,15 @@ class AttachmentListBottomSheetBuilder {
       barrierColor: AttachmentListStyles.barrierColor,
       backgroundColor: AttachmentListStyles.modalBackgroundColor,
       enableDrag: false,
-      builder: (context) => PointerInterceptor(child: _buildBody(context)),
+      builder: (context) => AttachmentListBottomSheetBodyBuilder(
-    );
+        imagePaths: _imagePaths,
-  }
+        attachments: _attachments,
-
+        statusBarHeight: _statusBarHeight,
-  Widget _buildBody(BuildContext context) {
+        scrollController: _scrollController,
-    ScrollController scrollController = ScrollController();
+        onDownloadAllButtonAction: _onDownloadAllButtonAction,
-    return SafeArea(
+        onDownloadAttachmentFileAction: _onDownloadAttachmentFileAction,
-      top: true,
+        onCancelButtonAction: _onCancelButtonAction,
-      bottom: false,
+        onCloseButtonAction: _onCloseButtonAction,
-      left: false,
-      right: false,
-      child: GestureDetector(
-        onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
-        child: Padding(
-          padding: EdgeInsets.only(top: _statusBarHeight),
-          child: ClipRRect(
-            borderRadius: AttachmentListStyles.modalRadius,
-            child: Scaffold(
-              appBar: AppBar(
-                leading: const SizedBox.shrink(),
-                title: Row(
-                  mainAxisAlignment: MainAxisAlignment.center,
-                  children: [
-                    Text(
-                      AppLocalizations.of(_context).attachmentList,
-                      style: AttachmentListStyles.titleTextStyle
-                    ),
-                    const SizedBox(width: AttachmentListStyles.titleSpace),
-                    Text(
-                      '${_attachments.length} ${AppLocalizations.of(_context).files}',
-                      style: AttachmentListStyles.subTitleTextStyle
-                    ),
-                  ],
-                ),
-                centerTitle: true,
-                actions: [
-                  GestureDetector(
-                    child: Padding(
-                      padding: const EdgeInsets.all(12.0),
-                      child: SvgPicture.asset(_imagePaths.icCircleClose),
-                    ),
-                    onTapDown: (_) {
-                      _onCloseButtonAction?.call();
-                      Get.back();
-                    },
-                  )
-                ],
-              ),
-              body: Container(
-                decoration: AttachmentListStyles.dialogBodyDecorationMobile,
-                child: Column(
-                  children: [
-                    Expanded(
-                      child: Padding(
-                        padding: AttachmentListStyles.listAreaPaddingMobile,
-                        child: RawScrollbar(
-                          trackColor: AttachmentListStyles.scrollbarTrackColor,
-                          thumbColor: AttachmentListStyles.scrollbarThumbColor,
-                          radius: AttachmentListStyles.scrollbarThumbRadius,
-                          trackRadius: AttachmentListStyles.scrollbarTrackRadius,
-                          thickness: AttachmentListStyles.scrollbarThickness,
-                          thumbVisibility: true,
-                          trackVisibility: true,
-                          controller: scrollController,
-                          trackBorderColor: AttachmentListStyles.scrollbarTrackBorderColor,
-                          child: Padding(
-                            padding: AttachmentListStyles.listItemPadding,
-                            child: ScrollConfiguration(
-                              behavior: ScrollConfiguration.of(_context).copyWith(scrollbars: false),
-                              child: ListView.separated(
-                                controller: scrollController,
-                                shrinkWrap: true,
-                                physics: const ScrollPhysics(),
-                                itemCount: _attachments.length,
-                                itemBuilder: (context, index) {
-                                  return AttachmentListItemWidget(
-                                    attachment: _attachments[index],
-                                    downloadAttachmentAction: _onDownloadAttachmentFileAction,
-                                  );
-                                },
-                                separatorBuilder: (context, index) {
-                                  return const Padding(
-                                    padding: AttachmentListStyles.separatorPadding,
-                                    child: Divider(
-                                      height: AttachmentListStyles.separatorHeight,
-                                      color: AttachmentListStyles.separatorColor,
-                                    ),
-                                  );
-                                },
-                              ),
-                            ),
-                          ),
-                        ),
-                      ),
-                    ),
-                    Padding(
-                      padding: const EdgeInsets.only(top: 12),
-                      child: Row(
-                        mainAxisAlignment: MainAxisAlignment.center,
-                        children: [
-                          if (_onDownloadAllButtonAction != null)
-                            _buildButton(
-                              name: AppLocalizations.of(_context).downloadAll,
-                              bgColor: AttachmentListStyles.downloadAllButtonColor,
-                              textStyle: AttachmentListStyles.downloadAllButtonTextStyle
-                            ),
-                          if (_onDownloadAllButtonAction != null && _onCancelButtonAction != null)
-                            const SizedBox(width: AttachmentListStyles.buttonsSpaceBetween),
-                          if (_onCancelButtonAction != null)
-                            _buildButton(
-                              name: AppLocalizations.of(_context).close,
-                              bgColor: AttachmentListStyles.cancelButtonColor,
-                              borderColor: AttachmentListStyles.cancelButtonBorderColor,
-                              textStyle: AttachmentListStyles.cancelButtonTextStyle
-                            )
-                        ],
-                      ),
-                    ),
-                  const SizedBox(height: AttachmentListStyles.dialogBottomSpace)
-                  ],
-                ),
-              ),
-            ),
-          ),
-        ),
-      )
-    );
-  }
-
-  Widget _buildButton({
-    String? name,
-    TextStyle? textStyle,
-    Color? bgColor,
-    Color? borderColor,
-    Function? action
-  }) {
-    return InkWell(
-      onTap: () => action?.call(),
-      child: Container(
-        padding: AttachmentListStyles.buttonsPadding,
-        decoration: BoxDecoration(
-          color: bgColor,
-          borderRadius: AttachmentListStyles.buttonRadius,
-          border: Border.all(
-            width: borderColor != null ? AttachmentListStyles.buttonBorderWidth : 0,
-            color: borderColor ?? AttachmentListStyles.buttonBorderDefaultColor
-          )
-        ),
-        child: Center(
-          child: Text(
-            name ?? '',
-            textAlign: TextAlign.center,
-            style: textStyle
-          ),
-        ),
       ),
     );
   }

lib/features/email/presentation/widgets/attachment_list/attachment_list_dialog_body_builder.dart

@@ -0,0 +1,141 @@
+import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/presentation/views/button/icon_button_web.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:model/email/attachment.dart';
+import 'package:tmail_ui_user/features/email/presentation/styles/attachment/attachment_list_styles.dart';
+import 'package:tmail_ui_user/features/email/presentation/widgets/attachment_list/attachment_list_action_button_builder.dart';
+import 'package:tmail_ui_user/features/email/presentation/widgets/attachment_list/attachment_list_dialog_builder.dart';
+import 'package:tmail_ui_user/features/email/presentation/widgets/attachment_list/attachment_list_item_widget.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+class AttachmentListDialogBodyBuilder extends StatelessWidget {
+  final BuildContext context;
+  final ImagePaths imagePaths;
+  final List<Attachment> attachments;
+  final ScrollController scrollController;
+  final double? widthDialog;
+  final double? heightDialog;
+  final OnDownloadAllButtonAction? onDownloadAllButtonAction;
+  final OnDownloadAttachmentFileAction? onDownloadAttachmentFileAction;
+  final OnCancelButtonAction? onCancelButtonAction;
+  final OnCloseButtonAction? onCloseButtonAction;
+
+  const AttachmentListDialogBodyBuilder({
+    super.key,
+    required this.context,
+    required this.imagePaths,
+    required this.attachments,
+    required this.scrollController,
+    this.widthDialog,
+    this.heightDialog,
+    this.onDownloadAllButtonAction,
+    this.onDownloadAttachmentFileAction,
+    this.onCancelButtonAction,
+    this.onCloseButtonAction
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: widthDialog,
+      height: heightDialog,
+      decoration: AttachmentListStyles.dialogBodyDecoration,
+      child: Column(
+        children: [
+          Container(
+              padding: AttachmentListStyles.headerPadding,
+              decoration: AttachmentListStyles.headerDecoration,
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  const Spacer(),
+                  Text(
+                      AppLocalizations.of(context).attachmentList,
+                      style: AttachmentListStyles.titleTextStyle
+                  ),
+                  const SizedBox(width: AttachmentListStyles.titleSpace),
+                  Text(
+                      '${attachments.length} ${AppLocalizations.of(context).files}',
+                      style: AttachmentListStyles.subTitleTextStyle
+                  ),
+                  if (onCloseButtonAction != null)
+                    const Spacer(),
+                  buildIconWeb(
+                    icon: SvgPicture.asset(imagePaths.icCircleClose),
+                    onTap: () {
+                      onCloseButtonAction!.call();
+                    },
+                  ),
+                ],
+              )
+          ),
+          Expanded(
+            child: Padding(
+              padding: AttachmentListStyles.listAreaPadding,
+              child: RawScrollbar(
+                trackColor: AttachmentListStyles.scrollbarTrackColor,
+                thumbColor: AttachmentListStyles.scrollbarThumbColor,
+                radius: AttachmentListStyles.scrollbarThumbRadius,
+                trackRadius: AttachmentListStyles.scrollbarTrackRadius,
+                thickness: AttachmentListStyles.scrollbarThickness,
+                thumbVisibility: true,
+                trackVisibility: true,
+                controller: scrollController,
+                trackBorderColor: AttachmentListStyles.scrollbarTrackBorderColor,
+                child: Padding(
+                  padding: AttachmentListStyles.listItemPadding,
+                  child: ScrollConfiguration(
+                    behavior: ScrollConfiguration.of(context).copyWith(scrollbars: false),
+                    child: ListView.separated(
+                      controller: scrollController,
+                      shrinkWrap: true,
+                      physics: const ScrollPhysics(),
+                      itemCount: attachments.length,
+                      itemBuilder: (context, index) {
+                        return AttachmentListItemWidget(
+                          attachment: attachments[index],
+                          downloadAttachmentAction: onDownloadAttachmentFileAction,
+                        );
+                      },
+                      separatorBuilder: (context, index) {
+                        return const Padding(
+                          padding: AttachmentListStyles.separatorPadding,
+                          child: Divider(
+                            height: AttachmentListStyles.separatorHeight,
+                            color: AttachmentListStyles.separatorColor,
+                          ),
+                        );
+                      },
+                    ),
+                  ),
+                ),
+              ),
+            ),
+          ),
+          Row(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              if (onDownloadAllButtonAction != null)
+                AttachmentListActionButtonBuilder(
+                    name: AppLocalizations.of(context).downloadAll,
+                    bgColor: AttachmentListStyles.downloadAllButtonColor,
+                    textStyle: AttachmentListStyles.downloadAllButtonTextStyle
+                ),
+              if (onDownloadAllButtonAction != null && onCancelButtonAction != null)
+                const SizedBox(width: AttachmentListStyles.buttonsSpaceBetween),
+              if (onCancelButtonAction != null)
+                AttachmentListActionButtonBuilder(
+                    name: AppLocalizations.of(context).close,
+                    bgColor: AttachmentListStyles.cancelButtonColor,
+                    borderColor: AttachmentListStyles.cancelButtonBorderColor,
+                    textStyle: AttachmentListStyles.cancelButtonTextStyle
+                )
+            ],
+          ),
+          const SizedBox(height: AttachmentListStyles.dialogBottomSpace)
+        ],
+      ),
+    );
+  }
+}

lib/features/email/presentation/widgets/attachment_list/attachment_list_dialog_builder.dart

@@ -1,215 +1,66 @@
 import 'package:core/presentation/resources/image_paths.dart';
 import 'package:core/presentation/utils/responsive_utils.dart';
-import 'package:core/presentation/views/button/icon_button_web.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_svg/flutter_svg.dart';
 import 'package:model/email/attachment.dart';
 import 'package:tmail_ui_user/features/email/presentation/styles/attachment/attachment_list_styles.dart';
-import 'package:tmail_ui_user/features/email/presentation/widgets/attachment_list/attachment_list_item_widget.dart';
+import 'package:tmail_ui_user/features/email/presentation/widgets/attachment_list/attachment_list_dialog_body_builder.dart';
-import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
 typedef OnDownloadAttachmentFileAction = void Function(Attachment attachment);
 typedef OnDownloadAllButtonAction = void Function();
 typedef OnCancelButtonAction = void Function();
 typedef OnCloseButtonAction = void Function();
 
-class AttachmentListDialogBuilder {
+class AttachmentListDialogBuilder extends StatelessWidget {
 
-  final BuildContext _context;
+  final ImagePaths imagePaths;
-  final ImagePaths _imagePaths;
+  final List<Attachment> attachments;
-  final List<Attachment> _attachments;
+  final ResponsiveUtils responsiveUtils;
-  final ResponsiveUtils _responsiveUtils;
+  final ScrollController scrollController;
 
-  Key? _key;
+  final Color? backgroundColor;
-  Color? _backgroundColor;
+  final double? widthDialog;
-  double? _widthDialog;
+  final double? heightDialog;
-  double? _heightDialog;
+  final OnDownloadAllButtonAction? onDownloadAllButtonAction;
+  final OnDownloadAttachmentFileAction? onDownloadAttachmentFileAction;
+  final OnCancelButtonAction? onCancelButtonAction;
+  final OnCloseButtonAction? onCloseButtonAction;
 
-  OnDownloadAllButtonAction? _onDownloadAllButtonAction;
+  const AttachmentListDialogBuilder({
-  OnDownloadAttachmentFileAction? _onDownloadAttachmentFileAction;
+    Key? key,
-  OnCancelButtonAction? _onCancelButtonAction;
+    required this.imagePaths,
-  OnCloseButtonAction? _onCloseButtonAction;
+    required this.attachments,
+    required this.responsiveUtils,
+    required this.scrollController,
+    this.backgroundColor,
+    this.widthDialog,
+    this.heightDialog,
+    this.onDownloadAllButtonAction,
+    this.onDownloadAttachmentFileAction,
+    this.onCancelButtonAction,
+    this.onCloseButtonAction,
+  }) : super(key: key);
   
-  AttachmentListDialogBuilder(
+  @override
-    this._context,
+  Widget build(BuildContext context) {
-    this._imagePaths,
-    this._attachments,
-    this._responsiveUtils,
-  );
-
-  void key(Key key) {
-    _key = key;
-  }
-
-  void backgroundColor(Color color) {
-    _backgroundColor = color;
-  }
-
-  void widthDialog(double width) {
-    _widthDialog = width;
-  }
-
-  void heightDialog(double height) {
-    _heightDialog = height;
-  }
-
-  void onDownloadAllButtonAction(OnDownloadAllButtonAction onDownloadAllButtonAction) {
-    _onDownloadAllButtonAction = onDownloadAllButtonAction;
-  }
-
-  void onDownloadAttachmentFileAction(OnDownloadAttachmentFileAction onDownloadAttachmentFileAction) {
-    _onDownloadAttachmentFileAction = onDownloadAttachmentFileAction;
-  }
-
-  void onCancelButtonAction(OnCancelButtonAction onCancelButtonAction) {
-    _onCancelButtonAction = onCancelButtonAction;
-  }
-
-  void onCloseButtonAction(OnCloseButtonAction onCloseButtonAction) {
-    _onCloseButtonAction = onCloseButtonAction;
-  }
-
-  Widget build() {
     return Dialog(
-      key: _key,
+      key: const ValueKey('attachment_list_dialog'),
       shape: AttachmentListStyles.shapeBorder,
-      insetPadding: _responsiveUtils.isDesktop(_context)
+      insetPadding: responsiveUtils.isDesktop(context)
         ? AttachmentListStyles.dialogPaddingWeb
         : AttachmentListStyles.dialogPaddingTablet,
       alignment: Alignment.center,
-      backgroundColor: _backgroundColor,
+      backgroundColor: backgroundColor,
-      child: _bodyContent(),
+      child: AttachmentListDialogBodyBuilder(
-    );
+        context: context,
-  }
+        imagePaths: imagePaths,
-
+        attachments: attachments,
-  Widget _bodyContent() {
+        widthDialog: widthDialog,
-    ScrollController scrollController = ScrollController();
+        heightDialog: heightDialog,
-    return Container(
+        scrollController: scrollController,
-      width: _widthDialog,
+        onDownloadAllButtonAction: onDownloadAllButtonAction,
-      height: _heightDialog,
+        onDownloadAttachmentFileAction: onDownloadAttachmentFileAction,
-      decoration: AttachmentListStyles.dialogBodyDecoration,
+        onCancelButtonAction: onCancelButtonAction,
-      child: Column(
+        onCloseButtonAction: onCloseButtonAction,
-        children: [
-          Container(
-            padding: AttachmentListStyles.headerPadding,
-            decoration: AttachmentListStyles.headerDecoration,
-            child: Row(
-              mainAxisAlignment: MainAxisAlignment.center,
-              children: [
-                const Spacer(),
-                Text(
-                  AppLocalizations.of(_context).attachmentList,
-                  style: AttachmentListStyles.titleTextStyle
-                ),
-                const SizedBox(width: AttachmentListStyles.titleSpace),
-                Text(
-                  '${_attachments.length} ${AppLocalizations.of(_context).files}',
-                  style: AttachmentListStyles.subTitleTextStyle
-                ),
-                if (_onCloseButtonAction != null)
-                  const Spacer(),
-                  buildIconWeb(
-                    icon: SvgPicture.asset(_imagePaths.icCircleClose),
-                    onTap: () => _onCloseButtonAction?.call(),
-                  ),
-              ],
-            )
-          ),
-          Expanded(
-            child: Padding(
-              padding: AttachmentListStyles.listAreaPadding,
-              child: RawScrollbar(
-                trackColor: AttachmentListStyles.scrollbarTrackColor,
-                thumbColor: AttachmentListStyles.scrollbarThumbColor,
-                radius: AttachmentListStyles.scrollbarThumbRadius,
-                trackRadius: AttachmentListStyles.scrollbarTrackRadius,
-                thickness: AttachmentListStyles.scrollbarThickness,
-                thumbVisibility: true,
-                trackVisibility: true,
-                controller: scrollController,
-                trackBorderColor: AttachmentListStyles.scrollbarTrackBorderColor,
-                child: Padding(
-                  padding: AttachmentListStyles.listItemPadding,
-                  child: ScrollConfiguration(
-                    behavior: ScrollConfiguration.of(_context).copyWith(scrollbars: false),
-                    child: ListView.separated(
-                      controller: scrollController,
-                      shrinkWrap: true,
-                      physics: const ScrollPhysics(),
-                      itemCount: _attachments.length,
-                      itemBuilder: (context, index) {
-                        return AttachmentListItemWidget(
-                          attachment: _attachments[index],
-                          downloadAttachmentAction: _onDownloadAttachmentFileAction,
-                        );
-                      },
-                      separatorBuilder: (context, index) {
-                        return const Padding(
-                          padding: AttachmentListStyles.separatorPadding,
-                          child: Divider(
-                            height: AttachmentListStyles.separatorHeight,
-                            color: AttachmentListStyles.separatorColor,
-                          ),
-                        );
-                      },
-                    ),
-                  ),
-                ),
-              ),
-            ),
-          ),
-          Row(
-            mainAxisAlignment: MainAxisAlignment.center,
-            children: [
-              if (_onDownloadAllButtonAction != null)
-                _buildButton(
-                  name: AppLocalizations.of(_context).downloadAll,
-                  bgColor: AttachmentListStyles.downloadAllButtonColor,
-                  textStyle: AttachmentListStyles.downloadAllButtonTextStyle
-                ),
-              if (_onDownloadAllButtonAction != null && _onCancelButtonAction != null)
-                const SizedBox(width: AttachmentListStyles.buttonsSpaceBetween),
-              if (_onCancelButtonAction != null)
-                _buildButton(
-                  name: AppLocalizations.of(_context).close,
-                  bgColor: AttachmentListStyles.cancelButtonColor,
-                  borderColor: AttachmentListStyles.cancelButtonBorderColor,
-                  textStyle: AttachmentListStyles.cancelButtonTextStyle
-                )
-            ],
-          ),
-          const SizedBox(height: AttachmentListStyles.dialogBottomSpace)
-        ],
-      ),
-    );
-  }
-
-  Widget _buildButton({
-    String? name,
-    TextStyle? textStyle,
-    Color? bgColor,
-    Color? borderColor,
-    Function? action
-  }) {
-    return InkWell(
-      onTap: () => action?.call(),
-      child: Container(
-        padding: AttachmentListStyles.buttonsPadding,
-        decoration: BoxDecoration(
-          color: bgColor,
-          borderRadius: AttachmentListStyles.buttonRadius,
-          border: Border.all(
-            width: borderColor != null ? AttachmentListStyles.buttonBorderWidth : 0,
-            color: borderColor ?? Colors.transparent
-          )
-        ),
-        child: Center(
-          child: Text(
-            name ?? '',
-            textAlign: TextAlign.center,
-            style: textStyle
-          ),
-        ),
       ),
     );
   }