pixes/lib/components/illust_widget.dart

import 'package:fluent_ui/fluent_ui.dart';
import 'package:pixes/components/animated_image.dart';
import 'package:pixes/foundation/app.dart';
import 'package:pixes/foundation/image_provider.dart';
import 'package:pixes/network/download.dart';
import 'package:pixes/utils/translation.dart';

import '../network/network.dart';
import '../pages/illust_page.dart';
import 'md.dart';

typedef UpdateFavoriteFunc = void Function(bool v);

class IllustWidget extends StatefulWidget {
  const IllustWidget(this.illust, {this.onTap, super.key});

  final Illust illust;

  final void Function()? onTap;

  static Map<String, UpdateFavoriteFunc> favoriteCallbacks = {};

  @override
  State<IllustWidget> createState() => _IllustWidgetState();
}

class _IllustWidgetState extends State<IllustWidget> {
  bool isBookmarking = false;

  final contextController = FlyoutController();
  final contextAttachKey = GlobalKey();

  @override
  void initState() {
    IllustWidget.favoriteCallbacks[widget.illust.id.toString()] = (v) {
      setState(() {
        widget.illust.isBookmarked = v;
      });
    };
    super.initState();
  }

  @override
  void dispose() {
    IllustWidget.favoriteCallbacks.remove(widget.illust.id.toString());
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (context, constrains) {
      final width = constrains.maxWidth;
      final height = widget.illust.height * width / widget.illust.width;
      return FlyoutTarget(
        controller: contextController,
        child: SizedBox(
          key: contextAttachKey,
          width: width,
          height: height,
          child: Stack(
            children: [
              Positioned.fill(
                  child: Container(
                width: width,
                height: height,
                padding:
                    const EdgeInsets.symmetric(horizontal: 8.0, vertical: 8.0),
                child: Card(
                  padding: EdgeInsets.zero,
                  margin: EdgeInsets.zero,
                  child: GestureDetector(
                    onTap: widget.onTap ??
                        () {
                          context.to(() => IllustPage(widget.illust));
                        },
                    onSecondaryTapUp: showMenu,
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(4.0),
                      child: AnimatedImage(
                        image: CachedImageProvider(
                            widget.illust.images.first.medium),
                        fit: BoxFit.cover,
                        width: width - 16.0,
                        height: height - 16.0,
                      ),
                    ),
                  ),
                ),
              )),
              if (widget.illust.images.length > 1)
                Positioned(
                  top: 12,
                  left: 12,
                  child: Container(
                      width: 28,
                      height: 20,
                      decoration: BoxDecoration(
                        color: FluentTheme.of(context)
                            .micaBackgroundColor
                            .withOpacity(0.72),
                        borderRadius: BorderRadius.circular(4),
                        border: Border.all(
                            color: ColorScheme.of(context).outlineVariant,
                            width: 0.6),
                      ),
                      child: Center(
                        child: Text(
                          "${widget.illust.images.length}P",
                          style: const TextStyle(fontSize: 12),
                        ),
                      )),
                ),
              if (widget.illust.isAi)
                Positioned(
                  bottom: 12,
                  left: 12,
                  child: Container(
                      width: 28,
                      height: 20,
                      decoration: BoxDecoration(
                        color: ColorScheme.of(context)
                            .errorContainer
                            .withOpacity(0.8),
                        borderRadius: BorderRadius.circular(4),
                        border: Border.all(
                            color: ColorScheme.of(context).outlineVariant,
                            width: 0.6),
                      ),
                      child: const Center(
                        child: Text(
                          "AI",
                          style: TextStyle(fontSize: 12),
                        ),
                      )),
                ),
              if (widget.illust.isUgoira)
                Positioned(
                  bottom: 12,
                  left: 12,
                  child: Container(
                      width: 28,
                      height: 20,
                      decoration: BoxDecoration(
                        color: ColorScheme.of(context)
                            .primaryContainer
                            .withOpacity(0.8),
                        borderRadius: BorderRadius.circular(4),
                        border: Border.all(
                            color: ColorScheme.of(context).outlineVariant,
                            width: 0.6),
                      ),
                      child: const Center(
                        child: Text(
                          "GIF",
                          style: TextStyle(fontSize: 12),
                        ),
                      )),
                ),
              if (widget.illust.isR18)
                Positioned(
                  bottom: 12,
                  right: 12,
                  child: Container(
                      width: 28,
                      height: 20,
                      decoration: BoxDecoration(
                        color: ColorScheme.of(context).errorContainer,
                        borderRadius: BorderRadius.circular(4),
                        border: Border.all(
                            color: ColorScheme.of(context).outlineVariant,
                            width: 0.6),
                      ),
                      child: const Center(
                        child: Text(
                          "R18",
                          style: TextStyle(fontSize: 12),
                        ),
                      )),
                ),
              if (widget.illust.isR18G)
                Positioned(
                  bottom: 12,
                  right: 12,
                  child: Container(
                      width: 28,
                      height: 20,
                      decoration: BoxDecoration(
                        color: ColorScheme.of(context).errorContainer,
                        borderRadius: BorderRadius.circular(4),
                        border: Border.all(
                            color: ColorScheme.of(context).outlineVariant,
                            width: 0.6),
                      ),
                      child: const Center(
                        child: Text(
                          "R18G",
                          style: TextStyle(fontSize: 12),
                        ),
                      )),
                ),
              Positioned(
                top: 16,
                right: 16,
                child: buildButton(),
              )
            ],
          ),
        ),
      );
    });
  }

  void showMenu(TapUpDetails details) {
    // This calculates the position of the flyout according to the parent navigator
    final targetContext = contextAttachKey.currentContext;
    if (targetContext == null) return;
    final box = targetContext.findRenderObject() as RenderBox;
    final position = box.localToGlobal(
      details.localPosition,
      ancestor: Navigator.of(context).context.findRenderObject(),
    );

    contextController.showFlyout(
      barrierColor: Colors.transparent,
      position: position,
      builder: (context) {
        return MenuFlyout(
          items: [
            MenuFlyoutItem(
                text: Text("View".tl),
                onPressed: () {
                  context.to(() => IllustPage(widget.illust));
                }),
            MenuFlyoutItem(
                text: Text("Private Favorite".tl),
                onPressed: () {
                  favorite("private");
                }),
            MenuFlyoutItem(
                text: Text("Download".tl),
                onPressed: () {
                  context.showToast(message: "Added");
                  DownloadManager().addDownloadingTask(widget.illust);
                }),
          ],
        );
      },
    );
  }

  void favorite([String type = "public"]) async {
    if (isBookmarking) return;
    setState(() {
      isBookmarking = true;
    });
    var method = widget.illust.isBookmarked ? "delete" : "add";
    var res =
        await Network().addBookmark(widget.illust.id.toString(), method, type);
    if (res.error) {
      if (mounted) {
        context.showToast(message: "Network Error");
      }
    } else {
      widget.illust.isBookmarked = !widget.illust.isBookmarked;
    }
    setState(() {
      isBookmarking = false;
    });
  }

  Widget buildButton() {
    Widget child;
    if (isBookmarking) {
      child = const SizedBox(
        width: 14,
        height: 14,
        child: ProgressRing(
          strokeWidth: 1.6,
        ),
      );
    } else if (widget.illust.isBookmarked) {
      child = Icon(
        MdIcons.favorite,
        color: Colors.red,
        size: 22,
      );
    } else {
      child = Icon(
        MdIcons.favorite,
        color: ColorScheme.of(context).outline,
        size: 22,
      );
    }

    return SizedBox(
      height: 24,
      width: 24,
      child: MouseRegion(
        cursor: SystemMouseCursors.click,
        child: GestureDetector(
          onTap: favorite,
          child: Center(
            child: child,
          ),
        ),
      ),
    );
  }
}