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/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';
import 'package:flutter_svg/flutter_svg.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,
            ),
          ),
          const SizedBox(
            height: 10,
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 0.0),
            child: GestureDetector(
              onTap: () => _openInteractiveViewer(context, image),
              child: SkeletonImage(
                  imageUrl: image,
                  aspectRatio: 16 / 9,
                  borderRadius: const BorderRadius.only(
                    bottomLeft: Radius.circular(0.0),
                    bottomRight: Radius.circular(0.0),
                    topLeft: Radius.circular(13.0),
                    topRight: Radius.circular(13.0),
                  )),
            ),
          ),
          Container(
            decoration: const BoxDecoration(
              color: Color.fromARGB(255, 0, 69, 92),
              borderRadius: BorderRadius.only(
                  bottomRight: Radius.circular(13.0),
                  bottomLeft: Radius.circular(13.0)),
            ),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                InfoCat(
                  category: category,
                  createdAt: createdAt,
                ),
                Row(
                  children: [
                    GestureDetector(
                      onTap: () => Navigator.of(context).pushNamed(
                        Routes.mentions,
                        arguments: {
                          'id': id,
                          'type': 'banner',
                          'title': title,
                        },
                      ),
                      child: SvgPicture.asset(
                        'lib/assets/icons/fluent_mention-32-regular.svg',
                        width: 25,
                        height: 25,
                        colorFilter: const ColorFilter.mode(
                          Colors.white,
                          BlendMode.srcIn,
                        ),
                      ),
                    ),
                    BookmarkButton(
                      itemId: id,
                      type: 'infography',
                      gestureSize: 22,
                      value: marked,
                      onMarkChanged: (value) => onMarkChanged(id, value, true),
                      svgIconOn: 'lib/assets/icons/bookmark_fill.svg',
                      svgIconOff: 'lib/assets/icons/archive-tick.svg',
                    ),
                    // Padding(
                    //   padding: const EdgeInsets.only(left: 8),
                    //   child: LikedButton(
                    //     itemId: id,
                    //     type: 'infography',
                    //     gestureSize: 32,
                    //     value: liked,
                    //     onMarkChanged: (value) =>
                    //         onLikedChanged(id, value, true),
                    //     likes: likes,
                    //     unlikedColor: Colors.white,
                    //   ),
                    // ),
                  ],
                ),
              ],
            ),
          ),
          const SizedBox(
            height: 10,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Expanded(
                child: Wrap(
                  spacing: 4,
                  runSpacing: 4,
                  children: [
                    for (var i = 0; i < tag.length; i++)
                      InfographyTag(
                        tag: tag[i],
                        onMarkChanged: onMarkChanged,
                      ),
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}