import 'package:didvan/config/theme_data.dart';
import 'package:didvan/models/overview_data.dart';
import 'package:didvan/models/requests/news.dart';
import 'package:didvan/routes/routes.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/liked_button.dart';
import 'package:didvan/views/widgets/shimmer_placeholder.dart';
import 'package:didvan/views/widgets/skeleton_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:persian_number_utility/persian_number_utility.dart';

class NewsOverview extends StatelessWidget {
  final OverviewData news;
  final NewsRequestArgs? newsRequestArgs;
  final void Function(int id, bool value, bool shouldUpdate) onMarkChanged;
  final void Function(int id, bool value, bool shouldUpdate) onLikedChanged;

  final bool hasUnmarkConfirmation;
  const NewsOverview({
    Key? key,
    required this.news,
    required this.onMarkChanged,
    this.newsRequestArgs,
    this.hasUnmarkConfirmation = false,
    required this.onLikedChanged,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DidvanCard(
      onTap: () => Navigator.of(context).pushNamed(
        Routes.newsDetails,
        arguments: {
          'onMarkChanged': (id, value) => onMarkChanged(id, value, true),
          'id': news.id,
          'args': newsRequestArgs,
          'hasUnmarkConfirmation': hasUnmarkConfirmation,
          'description': news.description,
        },
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              SkeletonImage(
                imageUrl: news.image,
                width: 100,
                height: 100,
                borderRadius: const BorderRadius.all(Radius.circular(16)),
              ),
              const SizedBox(width: 12),
              Expanded(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    DidvanText(
                      news.title,
                      style: Theme.of(context)
                          .textTheme
                          .bodyLarge
                          ?.copyWith(fontWeight: FontWeight.bold, fontSize: 16),
                    ),
                    const SizedBox(height: 8),
                    DidvanText(
                      news.description,
                      maxLines: 3,
                      overflow: TextOverflow.ellipsis,
                    ),
                  ],
                ),
              ),
            ],
          ),
          const DidvanDivider(verticalPadding: 8),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Expanded(
                child: Row(
                  children: [
                    SvgPicture.asset('lib/assets/icons/calendar.svg'),
                    const SizedBox(
                      width: 5,
                    ),
                    Flexible(
                      child: DidvanText(
                        DateTime.parse(news.createdAt).toPersianDateStr(),
                        style: Theme.of(context).textTheme.bodySmall,
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                      ),
                    ),
                    const SizedBox(
                      width: 20,
                    ),
                    SvgPicture.asset('lib/assets/icons/global.svg'),
                    const SizedBox(
                      width: 5,
                    ),
                    Flexible(
                      child: DidvanText(
                        news.reference!,
                        style: Theme.of(context).textTheme.bodySmall,
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                      ),
                    ),
                  ],
                ),
              ),
              Row(
                children: [
                  // LikedButton(
                  //   itemId: news.id,
                  //   type: 'news',
                  //   gestureSize: 32,
                  //   value: news.liked,
                  //   onMarkChanged: (value) =>
                  //       onLikedChanged(news.id, value, false),
                  //   askForConfirmation: hasUnmarkConfirmation,
                  //   likes: news.likes,
                  //   unlikedColor: Theme.of(context).colorScheme.caption,
                  // ),
                  // const SizedBox(
                  //   width: 4.0,
                  // ),
                  BookmarkButton(
                    itemId: news.id,
                    type: 'news',
                    gestureSize: 22,
                    value: news.marked,
                    onMarkChanged: (value) =>
                        onMarkChanged(news.id, value, false),
                    askForConfirmation: hasUnmarkConfirmation,
                    svgIconOn: 'lib/assets/icons/bookmark_fill.svg',
                    svgIconOff: 'lib/assets/icons/archive-tick.svg',
                    color: Theme.of(context).colorScheme.caption,
                    unbookmarkedColor: Theme.of(context).colorScheme.caption,
                  ),
                ],
              )
            ],
          ),
        ],
      ),
    );
  }

  static Widget get placeholder => const DidvanCard(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                ShimmerPlaceholder(height: 64, width: 64),
                SizedBox(width: 8),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    ShimmerPlaceholder(height: 18, width: 200),
                    SizedBox(height: 8),
                    ShimmerPlaceholder(height: 18, width: 100),
                  ],
                ),
              ],
            ),
            SizedBox(height: 12),
            ShimmerPlaceholder(
              height: 16,
              width: double.infinity,
            ),
            SizedBox(height: 8),
            ShimmerPlaceholder(
              height: 16,
              width: double.infinity,
            ),
            SizedBox(height: 8),
            ShimmerPlaceholder(
              height: 16,
              width: 100,
            ),
            DidvanDivider(verticalPadding: 8),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                ShimmerPlaceholder(height: 12, width: 150),
                ShimmerPlaceholder(height: 24, width: 24),
              ],
            ),
          ],
        ),
      );
}