mangayomi-mirror/lib/modules/manga/detail/widgets/recommendation_screen.dart

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:mangayomi/models/manga.dart';
import 'package:mangayomi/models/settings.dart';
import 'package:mangayomi/modules/widgets/custom_extended_image_provider.dart';
import 'package:mangayomi/modules/widgets/progress_center.dart';
import 'package:mangayomi/providers/l10n_providers.dart';
import 'package:mangayomi/services/recommendation.dart';
import 'package:mangayomi/utils/constant.dart';
import 'package:mangayomi/utils/extensions/build_context_extensions.dart';
import 'package:marquee/marquee.dart';
import 'package:photo_view/photo_view.dart';
import 'package:photo_view/photo_view_gallery.dart';
import 'package:super_sliver_list/super_sliver_list.dart';

class RecommendationScreen extends StatefulWidget {
  final String name;
  final ItemType itemType;
  final AlgorithmWeights algorithmWeights;

  const RecommendationScreen({
    super.key,
    required this.name,
    required this.itemType,
    required this.algorithmWeights,
  });

  @override
  State<RecommendationScreen> createState() => _RecommendationScreenState();
}

class _RecommendationScreenState extends State<RecommendationScreen> {
  String _errorMessage = "";
  bool _isLoading = true;
  List<RecommendationResult>? data;

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

  Future<void> _init() async {
    try {
      _errorMessage = "";
      data = await getRecommendations(
        widget.name,
        widget.itemType,
        widget.algorithmWeights,
      );
      if (mounted) {
        setState(() {
          _isLoading = false;
        });
      }
    } catch (e) {
      if (mounted) {
        setState(() {
          _errorMessage = e.toString();
          _isLoading = false;
        });
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    final l10n = context.l10n;

    return Scaffold(
      appBar: AppBar(title: Text(l10n.recommendations)),
      body: Padding(
        padding: EdgeInsetsGeometry.all(5),
        child: _isLoading
            ? const Center(child: CircularProgressIndicator())
            : Builder(
                builder: (context) {
                  if (_errorMessage.isNotEmpty) {
                    return Center(child: Text(_errorMessage));
                  }
                  if (data != null && data!.isNotEmpty) {
                    return SuperListView.builder(
                      extentPrecalculationPolicy: SuperPrecalculationPolicy(),
                      itemCount: data!.length,
                      itemBuilder: (context, index) {
                        final recommendation = data![index];
                        return ListTile(
                          onTap: () => context.push(
                            '/globalSearch',
                            extra: (
                              recommendation.titleEnglish ??
                                  recommendation.titleRomaji ??
                                  recommendation.titleNative,
                              widget.itemType,
                            ),
                          ),
                          title: Row(
                            children: [
                              if (recommendation.imgURLs.isNotEmpty)
                                _thumbnailPreview(
                                  context,
                                  recommendation.imgURLs.first,
                                ),
                              const SizedBox(width: 15),
                              recommendation.description != null
                                  ? Flexible(
                                      child: Column(
                                        crossAxisAlignment:
                                            CrossAxisAlignment.start,
                                        children: [
                                          _buildTitle(
                                            recommendation.titleEnglish ??
                                                recommendation.titleRomaji ??
                                                recommendation.titleNative ??
                                                "",
                                            context,
                                          ),
                                          Text(
                                            recommendation.description!,
                                            style: const TextStyle(
                                              fontSize: 11,
                                            ),
                                            overflow: TextOverflow.clip,
                                          ),
                                        ],
                                      ),
                                    )
                                  : Flexible(
                                      child: _buildTitle(
                                        recommendation.titleEnglish ??
                                            recommendation.titleRomaji ??
                                            recommendation.titleNative ??
                                            "",
                                        context,
                                      ),
                                    ),
                            ],
                          ),
                          subtitle: Padding(
                            padding: const EdgeInsets.symmetric(vertical: 15),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                Padding(
                                  padding: const EdgeInsets.symmetric(
                                    horizontal: 12,
                                  ),
                                  child: recommendation.genres.isEmpty
                                      ? const SizedBox(height: 15)
                                      : context.isTablet
                                      ? Wrap(
                                          children: [
                                            for (
                                              var i = 0;
                                              i < recommendation.genres.length;
                                              i++
                                            )
                                              Padding(
                                                padding: const EdgeInsets.only(
                                                  left: 2,
                                                  right: 2,
                                                  bottom: 5,
                                                ),
                                                child: SizedBox(
                                                  height: 30,
                                                  child: ElevatedButton(
                                                    style: ElevatedButton.styleFrom(
                                                      elevation: 0,
                                                      backgroundColor: Colors
                                                          .grey
                                                          .withValues(
                                                            alpha: 0.2,
                                                          ),
                                                      shape: RoundedRectangleBorder(
                                                        borderRadius:
                                                            BorderRadius.circular(
                                                              5,
                                                            ),
                                                      ),
                                                    ),
                                                    onPressed: null,
                                                    child: Text(
                                                      recommendation.genres[i],
                                                      style: TextStyle(
                                                        fontSize: 11.5,
                                                        color: context.isLight
                                                            ? Colors.black
                                                            : Colors.white,
                                                      ),
                                                    ),
                                                  ),
                                                ),
                                              ),
                                          ],
                                        )
                                      : SingleChildScrollView(
                                          scrollDirection: Axis.horizontal,
                                          child: Row(
                                            mainAxisAlignment:
                                                MainAxisAlignment.start,
                                            children: [
                                              for (
                                                var i = 0;
                                                i <
                                                    recommendation
                                                        .genres
                                                        .length;
                                                i++
                                              )
                                                Padding(
                                                  padding:
                                                      const EdgeInsets.only(
                                                        left: 2,
                                                        right: 2,
                                                        bottom: 5,
                                                      ),
                                                  child: SizedBox(
                                                    height: 30,
                                                    child: ElevatedButton(
                                                      style: ElevatedButton.styleFrom(
                                                        elevation: 0,
                                                        backgroundColor: Colors
                                                            .grey
                                                            .withValues(
                                                              alpha: 0.2,
                                                            ),
                                                        shape: RoundedRectangleBorder(
                                                          borderRadius:
                                                              BorderRadius.circular(
                                                                5,
                                                              ),
                                                        ),
                                                      ),
                                                      onPressed: () {},
                                                      child: Text(
                                                        recommendation
                                                            .genres[i],
                                                        style: TextStyle(
                                                          fontSize: 11.5,
                                                          color: context.isLight
                                                              ? Colors.black
                                                              : Colors.white,
                                                        ),
                                                      ),
                                                    ),
                                                  ),
                                                ),
                                            ],
                                          ),
                                        ),
                                ),
                                const SizedBox(width: 15),
                                Text(
                                  "${recommendation.score}% ${l10n.recommendations_similar}",
                                  style: TextStyle(
                                    background: Paint()
                                      ..color = Theme.of(context)
                                          .scaffoldBackgroundColor
                                          .withValues(alpha: 0.75)
                                      ..strokeWidth = 30.0
                                      ..strokeJoin = StrokeJoin.round
                                      ..style = PaintingStyle.stroke,
                                    fontWeight: FontWeight.bold,
                                  ),
                                ),
                              ],
                            ),
                          ),
                        );
                      },
                    );
                  }
                  return Center(child: Text(l10n.no_result));
                },
              ),
      ),
    );
  }

  Widget _buildTitle(String text, BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        // Make sure that (constraints.maxWidth - (35 + 5)) is strictly positive.
        final double availableWidth = constraints.maxWidth - (35 + 5);
        final textPainter =
            TextPainter(
              text: TextSpan(text: text, style: const TextStyle(fontSize: 13)),
              maxLines: 1,
              textDirection: TextDirection.ltr,
            )..layout(
              maxWidth: availableWidth > 0 ? availableWidth : 1.0,
            ); // - Download icon size (download_page_widget.dart, Widget Build SizedBox width: 35)

        final isOverflowing = textPainter.didExceedMaxLines;

        if (isOverflowing) {
          return SizedBox(
            height: 20,
            child: Marquee(
              text: text,
              style: const TextStyle(fontSize: 13, fontWeight: FontWeight.bold),
              blankSpace: 40.0,
              velocity: 30.0,
              pauseAfterRound: const Duration(seconds: 1),
              startPadding: 10.0,
            ),
          );
        } else {
          return Text(
            text,
            style: const TextStyle(fontSize: 13, fontWeight: FontWeight.bold),
            overflow: TextOverflow.ellipsis,
          );
        }
      },
    );
  }

  Widget _thumbnailPreview(BuildContext context, String? imageUrl) {
    final imageProvider = CustomExtendedNetworkImageProvider(
      toImgUrl(imageUrl ?? ""),
    );
    return Padding(
      padding: const EdgeInsets.all(3),
      child: GestureDetector(
        onTap: () {
          _openImage(context, imageProvider);
        },
        child: SizedBox(
          width: 100,
          height: 150,
          child: Container(
            decoration: BoxDecoration(
              borderRadius: const BorderRadius.all(Radius.circular(5)),
              image: DecorationImage(image: imageProvider, fit: BoxFit.cover),
            ),
          ),
        ),
      ),
    );
  }

  void _openImage(BuildContext context, ImageProvider imageProvider) {
    showDialog(
      context: context,
      builder: (context) {
        return Scaffold(
          backgroundColor: Colors.transparent,
          body: Stack(
            children: [
              GestureDetector(
                onTap: () => Navigator.pop(context),
                child: PhotoViewGallery.builder(
                  backgroundDecoration: const BoxDecoration(
                    color: Colors.transparent,
                  ),
                  itemCount: 1,
                  builder: (context, index) {
                    return PhotoViewGalleryPageOptions(
                      imageProvider: imageProvider,
                      minScale: PhotoViewComputedScale.contained,
                      maxScale: 2.0,
                    );
                  },
                  loadingBuilder: (context, event) {
                    return const ProgressCenter();
                  },
                ),
              ),
            ],
          ),
        );
      },
    );
  }
}

class SuperPrecalculationPolicy extends ExtentPrecalculationPolicy {
  @override
  bool shouldPrecalculateExtents(ExtentPrecalculationContext context) {
    return context.numberOfItems < 100;
  }
}