didvan-app/lib/views/home/main/widgets/infography_item.dart

import 'dart:math';

import 'package:didvan/config/design_config.dart';
import 'package:didvan/config/theme_data.dart';
import 'package:didvan/constants/app_icons.dart';
import 'package:didvan/models/tag.dart';
import 'package:didvan/views/widgets/animated_visibility.dart';
import 'package:didvan/views/widgets/bookmark_button.dart';
import 'package:didvan/views/widgets/didvan/card.dart';
import 'package:didvan/views/widgets/didvan/divider.dart';
import 'package:didvan/views/widgets/didvan/text.dart';
import 'package:didvan/views/widgets/infography_tag.dart';
import 'package:didvan/views/widgets/ink_wrapper.dart';
import 'package:didvan/views/widgets/skeleton_image.dart';
import 'package:flutter/material.dart';

class _BackButton extends StatefulWidget {
  const _BackButton({Key? key}) : super(key: key);

  @override
  __BackButtonState createState() => __BackButtonState();
}

class __BackButtonState extends State<_BackButton> {
  @override
  Widget build(BuildContext context) {
    return AnimatedVisibility(
      duration: DesignConfig.lowAnimationDuration,
      isVisible: true,
      child: InkWrapper(
        borderRadius: DesignConfig.lowBorderRadius,
        onPressed: Navigator.of(context).pop,
        child: Container(
          decoration: BoxDecoration(
            color: Theme.of(context).colorScheme.splash,
            border: Border.all(color: Theme.of(context).colorScheme.border),
            borderRadius: DesignConfig.lowBorderRadius,
          ),
          child: const Icon(
            DidvanIcons.back_regular,
            size: 32,
          ),
        ),
      ),
    );
  }
}

class InfographyItem extends StatelessWidget {
  final String image;
  final String title;
  final String category;
  final List<Tag> tag;
  final String createdAt;
  final int id;
  final bool marked;
  final Function onMarkChanged;

  const InfographyItem(
      {super.key,
      required this.onMarkChanged,
      required this.image,
      required this.category,
      required this.title,
      required this.tag,
      required this.createdAt,
      required this.id,
      required this.marked});

  void _openInteractiveViewer(BuildContext context, String image) {
    showDialog(
      context: context,
      builder: (context) => Stack(
        children: [
          Positioned.fill(
            child: InteractiveViewer(
              child: Center(
                child: SkeletonImage(
                  width: min(MediaQuery.of(context).size.width,
                      MediaQuery.of(context).size.height),
                  imageUrl: image,
                ),
              ),
            ),
          ),
          const Positioned(
            right: 24,
            top: 24,
            child: _BackButton(),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return DidvanCard(
      margin: const EdgeInsets.all(12),
      padding: const EdgeInsets.all(12),
      child: Column(
        children: [
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8.0),
            child: Align(
              alignment: Alignment.centerRight,
              child: DidvanText(
                title,
                style: Theme.of(context).textTheme.bodyLarge,
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
              ),
            ),
          ),
          const SizedBox(height: 8),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 8.0),
            child: GestureDetector(
              onTap: () => _openInteractiveViewer(context, image),
              child: SkeletonImage(
                imageUrl: image,
                aspectRatio: 16 / 9,
              ),
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Wrap(
                spacing: 4,
                runSpacing: 4,
                children: [
                  for (var i = 0; i < tag.length; i++)
                    InfographyTag(
                      tag: tag[i],
                    ),
                ],
              ),
            ],
          ),
          const DidvanDivider(),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              InfoCat(
                category: category,
                createdAt: createdAt,
              ),
              BookmarkButton(
                itemId: id,
                type: 'infography',
                gestureSize: 32,
                value: marked,
                onMarkChanged: (value) => onMarkChanged(id, value),
              ),
            ],
          )
        ],
      ),
    );
  }
}