import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';

import '/features/core/data/constants/const_colors.dart';
import '/features/core/data/constants/const_durations.dart';
import '/features/core/widgets/mcg_scaffold.dart';
import '/features/core/widgets/view_model_builder.dart';
import 'gallery_view_model.dart';

class GalleryView extends StatelessWidget {
  const GalleryView({super.key});

  @override
  Widget build(BuildContext context) {
    return ViewModelBuilder<GalleryViewModel>(
      viewModelBuilder: () => GalleryViewModel.locate,
      builder: (context, final model) => McgScaffold(
        bodyBuilderWaiter: model.isInitialised,
        appBar: AppBar(
          title: Text(model.strings.gallery),
        ),
        body: Center(
          child: ValueListenableBuilder<bool>(
            valueListenable: model.isDisplayingPressingPrompt,
            builder: (context, final isDisplayingPressingPrompt, _) => AnimatedSwitcher(
              duration: ConstDurations.defaultAnimationDuration,
              child: isDisplayingPressingPrompt
                  ? ElevatedButton(
                      onPressed: model.onPromptPressed,
                      child: Text(model.strings.startLoadingPrompt),
                    )
                  : DecoratedBox(
                      decoration: const BoxDecoration(color: ConstColours.galleryBackgroundColour),
                      child: SingleChildScrollView(
                        // Using Wrap instead of GridView, to make use of different image sizes
                        child: Wrap(
                          runSpacing: 24,
                          spacing: 8,
                          alignment: WrapAlignment.center,
                          runAlignment: WrapAlignment.center,
                          crossAxisAlignment: WrapCrossAlignment.center,
                          children: [
                            for (final imageModel in model.imageModels)
                              GestureDetector(
                                onTap: () => model.pushImageCarouselView(
                                  context,
                                  imageModel: imageModel,
                                ),
                                child: Hero(
                                  tag: imageModel.imageIndex.toString(),
                                  child: CachedNetworkImage(
                                    imageUrl: imageModel.uri.toString(),
                                    cacheKey: imageModel.imageIndex.toString(),
                                    progressIndicatorBuilder: (_, __, final progress) =>
                                        CircularProgressIndicator(
                                      value: model.downloadProgressValue(progress: progress),
                                    ),
                                  ),
                                ),
                              ),
                          ],
                        ),
                      ),
                    ),
            ),
          ),
        ),
      ),
    );
  }
}