import 'package:core/core.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
import 'package:model/model.dart';
import 'package:package_info_plus/package_info_plus.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/mailbox_controller.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_categories.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/widgets/bottom_bar_selection_mailbox_widget.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_folder_tile_builder.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_search_tile_builder.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/widgets/user_information_widget_builder.dart';
import 'package:tmail_ui_user/features/thread/presentation/widgets/search_app_bar_widget.dart';
import 'package:tmail_ui_user/main/localizations/app_localizations.dart';

class MailboxView extends GetWidget<MailboxController> {

  final _imagePaths = Get.find<ImagePaths>();
  final _responsiveUtils = Get.find<ResponsiveUtils>();

  MailboxView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
    ));

    return SafeArea(bottom: false, left: false, right: false,
        top: _responsiveUtils.isMobile(context),
        child: ClipRRect(
            borderRadius: _responsiveUtils.isPortraitMobile(context)
                ? const BorderRadius.only(
                    topRight: Radius.circular(14),
                    topLeft: Radius.circular(14))
                : const BorderRadius.all(Radius.zero),
            child: Drawer(
                child: Scaffold(
                  backgroundColor: Colors.white,
                  body: Stack(children: [
                    Column(children: [
                      _buildHeaderMailbox(context),
                      Obx(() => controller.isSearchActive()
                          ? SafeArea(bottom: false, top: false, right: false,
                                child: _buildInputSearchFormWidget(context))
                          : const SizedBox.shrink()),
                      Expanded(child: Obx(() => Container(
                        color: controller.isSearchActive()
                            ? Colors.white
                            : AppColor.colorBgMailbox,
                        child: RefreshIndicator(
                          color: AppColor.primaryColor,
                          onRefresh: () async => controller.refreshAllMailbox(),
                          child: SafeArea(top: false, right: false,
                            bottom: !controller.isSelectionEnabled(),
                            child: controller.isSearchActive()
                                ? _buildListMailboxSearched(context)
                                : Padding(
                                    padding: EdgeInsets.only(
                                        bottom: _responsiveUtils.isLandscapeMobile(context)
                                            || controller.isSelectionEnabled() ? 0 : 55),
                                    child: _buildListMailbox(context))
                          )
                        ),
                      ))),
                      Obx(() => controller.isSelectionEnabled()
                          ? _buildOptionSelectionMailbox(context)
                          : const SizedBox.shrink()),
                    ]),
                    Obx(() {
                      final appInformation = controller.mailboxDashBoardController.appInformation.value;
                      if (appInformation != null
                          && !controller.isSearchActive()
                          && !controller.isSelectionEnabled()) {
                        if (_responsiveUtils.isLandscapeMobile(context)) {
                          return const SizedBox.shrink();
                        }
                        return Align(
                            alignment: Alignment.bottomCenter,
                            child: _buildVersionInformation(context, appInformation));
                      } else {
                        return const SizedBox.shrink();
                      }
                    })
                  ]),
                )
            )
        )
    );
  }

  Widget _buildHeaderMailbox(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Padding(
          padding: EdgeInsets.only(top: _responsiveUtils.isMobile(context) ? 10 : 30, bottom: 8),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              _responsiveUtils.isMobile(context) || _responsiveUtils.isTablet(context)
                  ? Padding(padding: const EdgeInsets.only(left: 10), child: _buildCloseScreenButton(context))
                  : const SizedBox(width: 50),
              Obx(() {
                if (controller.isSearchActive()) {
                  return controller.listMailboxSearched.isNotEmpty
                      ? SizedBox(width: controller.isSelectionEnabled() ? 49 : 40)
                      : const SizedBox.shrink();
                } else {
                  return SizedBox(width: controller.isSelectionEnabled() ? 49 : 40);
                }
              }),
              Expanded(child: Text(
                AppLocalizations.of(context).folders,
                textAlign: TextAlign.center,
                style: const TextStyle(fontSize: 21, color: Colors.black, fontWeight: FontWeight.bold))),
              Obx(() {
                if (controller.isSearchActive()) {
                  return controller.listMailboxSearched.isNotEmpty
                      ? _buildEditMailboxButton(context, controller.isSelectionEnabled())
                      : const SizedBox(width: 25);
                } else {
                  return _buildEditMailboxButton(context, controller.isSelectionEnabled());
                }
              }),
              Padding(padding: const EdgeInsets.only(right: 5), child: _buildAddNewFolderButton(context)),
            ]
          )
        ),
        if (!_responsiveUtils.isTabletLarge(context))
          const Divider(color: AppColor.colorDividerMailbox, height: 0.5, thickness: 0.2),
      ]
    );
  }

  Widget _buildCloseScreenButton(BuildContext context) {
    return buildIconWeb(
        icon: SvgPicture.asset(_imagePaths.icCloseMailbox, width: 28, height: 28, fit: BoxFit.fill),
        tooltip: AppLocalizations.of(context).close,
        onTap: () => controller.closeMailboxScreen(context));
  }

  Widget _buildAddNewFolderButton(BuildContext context) {
    return buildIconWeb(
        icon: SvgPicture.asset(_imagePaths.icAddNewFolder, width: 28, height: 24, color: AppColor.colorTextButton, fit: BoxFit.fill),
        tooltip: AppLocalizations.of(context).new_mailbox,
        onTap: () => controller.goToCreateNewMailboxView());
  }

  Widget _buildEditMailboxButton(BuildContext context, bool isSelectionEnabled) {
    return Material(
        shape: const CircleBorder(),
        color: Colors.transparent,
        child: TextButton(
            child: Text(
              !isSelectionEnabled ? AppLocalizations.of(context).edit : AppLocalizations.of(context).cancel,
              style: const TextStyle(fontSize: 17, color: AppColor.colorTextButton, fontWeight: FontWeight.normal)),
            onPressed: () => !isSelectionEnabled
                ? controller.enableSelectionMailbox()
                : controller.disableSelectionMailbox()
        )
    );
  }

  Widget _buildUserInformation(BuildContext context) {
    return Column(children: [
      Padding(
        padding: EdgeInsets.only(
          left: _responsiveUtils.isLandscapeMobile(context) ? 0 : 16,
          right: 16),
        child: (UserInformationWidgetBuilder(_imagePaths, context, controller.mailboxDashBoardController.userProfile.value)
              ..addOnLogoutAction(() => controller.mailboxDashBoardController.goToSettings()))
            .build()),
      const Divider(color: AppColor.colorDividerMailbox, height: 0.5, thickness: 0.2)
    ]);
  }

  Widget _buildSearchBarWidget(BuildContext context) {
    return Padding(
      padding: EdgeInsets.only(
          top: _responsiveUtils.isDesktop(context) ? 16 : 12,
          bottom: 16,
          left: _responsiveUtils.isLandscapeMobile(context) ? 0 : 16,
          right: 16),
      child: (SearchBarView(_imagePaths)
          ..hintTextSearch(AppLocalizations.of(context).hint_search_mailboxes)
          ..addOnOpenSearchViewAction(() => controller.enableSearch()))
        .build());
  }

  Widget _buildLoadingView() {
    return Obx(() => controller.viewState.value.fold(
      (failure) => const SizedBox.shrink(),
      (success) => success is LoadingState
        ? const Center(child: Padding(
            padding: EdgeInsets.only(top: 16),
            child: SizedBox(
              width: 24,
              height: 24,
              child: CupertinoActivityIndicator(color: AppColor.colorTextButton))))
        : const SizedBox.shrink()));
  }

  Widget _buildListMailbox(BuildContext context) {
    return SingleChildScrollView(
      controller: controller.mailboxListScrollController,
      key: const PageStorageKey('mailbox_list'),
      physics: const ClampingScrollPhysics(),
      padding: EdgeInsets.only(bottom: controller.isSelectionEnabled() ? 16 : 0),
      child: Column(children: [
        Obx(() {
          if ((controller.isSelectionEnabled() && _responsiveUtils.isLandscapeMobile(context))
              || (BuildUtils.isWeb && _responsiveUtils.isDesktop(context))) {
            return const SizedBox.shrink();
          }
          return _buildUserInformation(context);
        }),
        if ((BuildUtils.isWeb && !_responsiveUtils.isDesktop(context))
            || !BuildUtils.isWeb) _buildSearchBarWidget(context),
        _buildLoadingView(),
        Obx(() => controller.defaultMailboxTree.value.root.childrenItems?.isNotEmpty ?? false
            ? _buildMailboxCategory(context, MailboxCategories.exchange, controller.defaultMailboxTree.value.root)
            : const SizedBox.shrink()),
        const SizedBox(height: 12),
        Obx(() => controller.folderMailboxTree.value.root.childrenItems?.isNotEmpty ?? false
            ? _buildMailboxCategory(context, MailboxCategories.folders, controller.folderMailboxTree.value.root)
            : const SizedBox.shrink()),
      ])
    );
  }

  Widget _buildHeaderMailboxCategory(BuildContext context, MailboxCategories categories) {
    return Padding(
        padding: EdgeInsets.only(
            left: _responsiveUtils.isLandscapeMobile(context) ? 8 : 28,
            right: 16),
        child: Row(children: [
          Expanded(child: Text(categories.getTitle(context),
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              style: const TextStyle(fontSize: 20, color: Colors.black, fontWeight: FontWeight.bold))),
          buildIconWeb(
              icon: SvgPicture.asset(
                  categories.getExpandMode(controller.mailboxCategoriesExpandMode.value) == ExpandMode.EXPAND
                    ? _imagePaths.icExpandFolder
                    : _imagePaths.icCollapseFolder,
                  color: AppColor.primaryColor, fit: BoxFit.fill),
              tooltip: AppLocalizations.of(context).collapse,
              onTap: () => controller.toggleMailboxCategories(categories))
        ]));
  }

  Widget _buildBodyMailboxCategory(BuildContext context, MailboxCategories categories, MailboxNode mailboxNode) {
    final lastNode = mailboxNode.childrenItems?.last;

    return Container(
        decoration: BoxDecoration(borderRadius: BorderRadius.circular(14), color: Colors.white),
        margin: EdgeInsets.only(
            left: _responsiveUtils.isLandscapeMobile(context) ? 0 : 16,
            right: 16),
        padding: const EdgeInsets.only(left: 12),
        child: TreeView(
            key: Key('${categories.keyValue}_mailbox_list'),
            children: _buildListChildTileWidget(context, mailboxNode, lastNode: lastNode)));
  }

  Widget _buildMailboxCategory(BuildContext context, MailboxCategories categories, MailboxNode mailboxNode) {
    return Column(children: [
      _buildHeaderMailboxCategory(context, categories),
      AnimatedContainer(
        duration: const Duration(milliseconds: 400),
        child: categories.getExpandMode(controller.mailboxCategoriesExpandMode.value) == ExpandMode.EXPAND
            ? _buildBodyMailboxCategory(context, categories, mailboxNode)
            : const Offstage())
    ]);
  }

  List<Widget> _buildListChildTileWidget(BuildContext context, MailboxNode parentNode, {MailboxNode? lastNode}) {
    return parentNode.childrenItems
      ?.map((mailboxNode) => mailboxNode.hasChildren()
          ? TreeViewChild(
                  context,
                  key: const Key('children_tree_mailbox_child'),
                  isExpanded: mailboxNode.expandMode == ExpandMode.EXPAND,
                  parent: Obx(() => (MailBoxFolderTileBuilder(context, _imagePaths, mailboxNode, lastNode: lastNode,
                          allSelectMode: controller.currentSelectMode.value)
                      ..addOnOpenMailboxFolderClick((mailboxNode) => controller.openMailbox(context, mailboxNode.item))
                      ..addOnExpandFolderActionClick((mailboxNode) => controller.toggleMailboxFolder(mailboxNode))
                      ..addOnSelectMailboxFolderClick((mailboxNode) => controller.selectMailboxNode(mailboxNode)))
                    .build()),
                  children: _buildListChildTileWidget(context, mailboxNode)
              ).build()
          : Obx(() => (MailBoxFolderTileBuilder(context, _imagePaths, mailboxNode, lastNode: lastNode,
                  allSelectMode: controller.currentSelectMode.value)
              ..addOnOpenMailboxFolderClick((mailboxNode) => controller.openMailbox(context, mailboxNode.item))
              ..addOnSelectMailboxFolderClick((mailboxNode) => controller.selectMailboxNode(mailboxNode)))
            .build())
      ).toList() ?? <Widget>[];
  }

  Widget _buildInputSearchFormWidget(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(top: 16, bottom: 16),
      child: Row(
          children: [
            _buildBackSearchButton(context),
            Expanded(child: (SearchAppBarWidget(
                  _imagePaths,
                  controller.searchQuery.value,
                  controller.searchFocus,
                  controller.searchInputController,
                  hasBackButton: false,
                  hasSearchButton: true)
              ..addPadding(EdgeInsets.zero)
              ..setMargin(const EdgeInsets.only(right: 16))
              ..addDecoration(BoxDecoration(borderRadius: BorderRadius.circular(12), color: AppColor.colorBgSearchBar))
              ..addIconClearText(SvgPicture.asset(_imagePaths.icClearTextSearch, width: 18, height: 18, fit: BoxFit.fill))
              ..setHintText(AppLocalizations.of(context).hint_search_mailboxes)
              ..addOnClearTextSearchAction(() => controller.clearSearchText())
              ..addOnTextChangeSearchAction((query) => controller.searchMailbox(query))
              ..addOnSearchTextAction((query) => controller.searchMailbox(query)))
            .build())
          ]
      )
    );
  }

  Widget _buildBackSearchButton(BuildContext context) {
    return Padding(
        padding: EdgeInsets.only(left: _responsiveUtils.isLandscapeMobile(context) ? 0 : 5),
        child: buildIconWeb(
          onTap: () => controller.disableSearch(),
          icon: SvgPicture.asset(_imagePaths.icBack, color: AppColor.colorTextButton),
        ));
  }

  Widget _buildListMailboxSearched(BuildContext context) {
    return Obx(() => Container(
        margin: _responsiveUtils.isDesktop(context)
            ? const EdgeInsets.only(left: 16, right: 16)
            : EdgeInsets.zero,
        decoration: _responsiveUtils.isDesktop(context)
            ? BoxDecoration(borderRadius: BorderRadius.circular(14), color: Colors.white)
            : null,
        child: ListView.builder(
            padding: EdgeInsets.only(left: _responsiveUtils.isLandscapeMobile(context) ? 0 : 16, right: 8),
            key: const Key('list_mailbox_searched'),
            itemCount: controller.listMailboxSearched.length,
            shrinkWrap: true,
            primary: false,
            itemBuilder: (context, index) =>
                Obx(() => (MailboxSearchTileBuilder(
                        context,
                        _imagePaths,
                        _responsiveUtils,
                        controller.listMailboxSearched[index],
                        allSelectMode: controller.currentSelectMode.value,
                        lastMailbox: controller.listMailboxSearched.last)
                    ..addOnOpenMailboxAction((mailbox) => controller.openMailbox(context, mailbox))
                    ..addOnSelectMailboxActionClick((mailbox) => controller.selectMailboxSearched(context, mailbox)))
                  .build())
        )
    ));
  }

  Widget _buildOptionSelectionMailbox(BuildContext context) {
    return Column(children: [
      const Divider(color: AppColor.lineItemListColor, height: 1, thickness: 0.2),
      SafeArea(
        child: Padding(
          padding: const EdgeInsets.symmetric(vertical: 8),
          child: (BottomBarSelectionMailboxWidget(context,
                  _imagePaths,
                  controller.listMailboxSelected)
              ..addOnMailboxActionsClick((actions, listMailboxSelected) =>
                  controller.pressMailboxSelectionAction(
                      context,
                      actions,
                      listMailboxSelected)))
            .build()))
    ]);
  }

  Widget _buildVersionInformation(BuildContext context, PackageInfo packageInfo) {
    return SafeArea(child: Container(
      padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 16),
      child: Text(
        '${AppLocalizations.of(context).version} ${packageInfo.version}',
        textAlign: TextAlign.center,
        style: const TextStyle(fontSize: 16, color: AppColor.colorContentEmail, fontWeight: FontWeight.w500),
      ),
    ));
  }
}