import 'package:auto_route/auto_route.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/svg.dart';
import 'package:selfprivacy/logic/cubit/backups/backups_cubit.dart';
import 'package:selfprivacy/logic/cubit/services/services_cubit.dart';
import 'package:selfprivacy/logic/models/backup.dart';
import 'package:selfprivacy/logic/models/service.dart';
import 'package:selfprivacy/ui/helpers/modals.dart';
import 'package:selfprivacy/ui/layouts/brand_hero_screen.dart';
import 'package:selfprivacy/ui/pages/backups/snapshot_modal.dart';

@RoutePage()
class BackupsListPage extends StatelessWidget {
  const BackupsListPage({
    required this.service,
    super.key,
  });

  final Service? service;

  @override
  Widget build(final BuildContext context) {
    // If the service is null, get all backups from state. If not null, call the
    // serviceBackups(serviceId) on the backups state.
    final List<Backup> backups = service == null
        ? context.watch<BackupsCubit>().state.backups
        : context.watch<BackupsCubit>().state.serviceBackups(service!.id);
    final bool preventActions =
        context.watch<BackupsCubit>().state.preventActions;
    return BrandHeroScreen(
      heroTitle: 'backup.snapshots_title'.tr(),
      children: [
        if (backups.isEmpty)
          Center(
            child: Text(
              'backup.no_backups'.tr(),
            ),
          )
        else
          ...backups.map(
            (final Backup backup) {
              final service = context
                  .read<ServicesCubit>()
                  .state
                  .getServiceById(backup.serviceId);
              return ListTile(
                onTap: preventActions
                    ? null
                    : () {
                        showModalBottomSheet(
                          useRootNavigator: true,
                          context: context,
                          isScrollControlled: true,
                          builder: (final BuildContext context) =>
                              DraggableScrollableSheet(
                            expand: false,
                            maxChildSize: 0.9,
                            minChildSize: 0.5,
                            initialChildSize: 0.7,
                            builder: (final context, final scrollController) =>
                                SnapshotModal(
                              snapshot: backup,
                              scrollController: scrollController,
                            ),
                          ),
                        );
                      },
                onLongPress: preventActions
                    ? null
                    : () {
                        showPopUpAlert(
                          alertTitle: 'backup.forget_snapshot'.tr(),
                          description: 'backup.forget_snapshot_alert'.tr(),
                          actionButtonTitle: 'backup.forget_snapshot'.tr(),
                          actionButtonOnPressed: () => {
                            context.read<BackupsCubit>().forgetSnapshot(
                                  backup.id,
                                ),
                          },
                        );
                      },
                title: Text(
                  '${MaterialLocalizations.of(context).formatShortDate(backup.time)} ${TimeOfDay.fromDateTime(backup.time).format(context)}',
                ),
                subtitle: Text(
                  service?.displayName ?? backup.fallbackServiceName,
                ),
                leading: service != null
                    ? SvgPicture.string(
                        service.svgIcon,
                        height: 24,
                        width: 24,
                        colorFilter: ColorFilter.mode(
                          Theme.of(context).colorScheme.onBackground,
                          BlendMode.srcIn,
                        ),
                      )
                    : const Icon(
                        Icons.question_mark_outlined,
                      ),
              );
            },
          ),
      ],
    );
  }
}