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/routes/routes.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/icon_button.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/liked_button.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 bool liked;
  final int likes;
  final void Function(int id, bool value, bool shouldUpdate) onMarkChanged;
  final void Function(int id, bool value, bool shouldUpdate) onLikedChanged;

  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,
      required this.liked,
      required this.likes,
      required this.onLikedChanged});

  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(
      padding: const EdgeInsets.all(12),
      child: Column(
        children: [
          Align(
            alignment: Alignment.centerRight,
            child: DidvanText(
              title,
              style: Theme.of(context).textTheme.bodyLarge,
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
            ),
          ),
          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],
                      onMarkChanged: onMarkChanged,
                    ),
                ],
              ),
            ],
          ),
          const DidvanDivider(),
          Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              InfoCat(
                category: category,
                createdAt: createdAt,
              ),
              Row(
                children: [
                  LikedButton(
                    itemId: id,
                    type: 'infography',
                    gestureSize: 32,
                    value: liked,
                    onMarkChanged: (value) => onLikedChanged(id, value, true),
                    likes: likes,
                  ),
                  const SizedBox(
                    width: 4.0,
                  ),
                  DidvanIconButton(
                    gestureSize: 32,
                    onPressed: () => Navigator.of(context).pushNamed(
                      Routes.mentions,
                      arguments: {
                        'id': id,
                        'type': 'banner',
                        'title': title,
                      },
                    ),
                    icon: DidvanIcons.mention_icon,
                  ),
                  BookmarkButton(
                    itemId: id,
                    type: 'infography',
                    gestureSize: 32,
                    value: marked,
                    onMarkChanged: (value) => onMarkChanged(id, value, true),
                  ),
                ],
              ),
            ],
          )
        ],
      ),
    );
  }
}