import 'package:didvan/config/theme_data.dart';
import 'package:didvan/models/overview_data.dart';
import 'package:didvan/models/requests/radar.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/flutter_svg.dart';
import 'package:persian_number_utility/persian_number_utility.dart';

class RadarOverview extends StatelessWidget {
  final OverviewData radar;
  final void Function(int id, int count) onCommentsChanged;
  final void Function(int id, bool value, bool shouldUpdate) onMarkChanged;
  final void Function(int id, bool value, bool shouldUpdate) onLikedChanged;
  final bool hasUnmarkConfirmation;
  final RadarRequestArgs? radarRequestArgs;
  const RadarOverview({
    Key? key,
    required this.radar,
    required this.onCommentsChanged,
    required this.onMarkChanged,
    this.radarRequestArgs,
    this.hasUnmarkConfirmation = false,
    required this.onLikedChanged,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DidvanCard(
      padding: const EdgeInsets.all(0),
      enableBorder: true,
      onTap: () => Navigator.of(context).pushNamed(
        Routes.radarDetails,
        arguments: {
          'onMarkChanged': (id, value) => onMarkChanged(id, value, true),
          'onCommentsChanged': onCommentsChanged,
          'id': radar.id,
          'args': radarRequestArgs,
          'hasUnmarkConfirmation': hasUnmarkConfirmation,
          'description': radar.description,
        },
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SkeletonImage(
              imageUrl: radar.image,
              aspectRatio: 16 / 8,
              borderRadius: const BorderRadius.only(
                topLeft: Radius.circular(16),
                topRight: Radius.circular(16),
                bottomLeft: Radius.circular(0),
                bottomRight: Radius.circular(0),
              )),
          const SizedBox(
            height: 10,
          ),
          Padding(
            padding: const EdgeInsets.only(left: 8.0, right: 8.0),
            child: DidvanText(
              radar.title,
              fontWeight: FontWeight.w600,
            ),
          ),
          Stack(
            children: [
              if (radar.forManagers)
                Positioned(
                  top: 0,
                  right: 0,
                  child: Container(
                    padding: const EdgeInsets.all(4),
                    decoration: BoxDecoration(
                      color: Theme.of(context).colorScheme.secondary,
                      borderRadius: const BorderRadius.only(
                        bottomLeft: Radius.circular(8),
                        topRight: Radius.circular(8),
                      ),
                    ),
                    child: DidvanText(
                      'برای مدیران',
                      style: Theme.of(context).textTheme.labelSmall,
                      color: Theme.of(context).colorScheme.white,
                    ),
                  ),
                ),
            ],
          ),
          const SizedBox(height: 5),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: DidvanText(
              radar.description,
              maxLines: 3,
              overflow: TextOverflow.ellipsis,
            ),
          ),
          const Padding(
            padding: EdgeInsets.only(left: 8, right: 8),
            child: DidvanDivider(),
          ),
          Row(
            children: [
              if (radar.comments != 0) DidvanText(radar.comments.toString()),
              const SizedBox(width: 4),
              Padding(
                padding: const EdgeInsets.fromLTRB(8, 8, 8, 20),
                child: Row(
                  children: [
                    SvgPicture.asset('lib/assets/icons/calendar.svg'),
                    const SizedBox(
                      width: 5,
                    ),
                    DidvanText(
                      DateTime.parse(radar.createdAt).toPersianDateStr(),
                      style: Theme.of(context)
                          .textTheme
                          .labelSmall
                          ?.copyWith(fontWeight: FontWeight.bold),
                      color: Theme.of(context).colorScheme.caption,
                    ),
                    const SizedBox(
                      width: 15,
                    ),
                    SvgPicture.asset(
                      'lib/assets/icons/ion_extension-puzzle-outline.svg',
                      height: 17,
                    ),
                    const SizedBox(
                      width: 5,
                    ),
                    DidvanText(
                      radar.categories!.first.label,
                      style: Theme.of(context)
                          .textTheme
                          .labelSmall
                          ?.copyWith(fontWeight: FontWeight.bold),
                      color: Theme.of(context).colorScheme.caption,
                    ),
                  ],
                ),
              ),
              const Spacer(),
              Padding(
                padding: const EdgeInsets.fromLTRB(8, 0, 8, 5),
                child: Row(
                  children: [
                    // LikedButton(
                    //   itemId: radar.id,
                    //   type: 'radar',
                    //   gestureSize: 32,
                    //   value: radar.liked,
                    //   onMarkChanged: (value) =>
                    //       onLikedChanged(radar.id, value, false),
                    //   askForConfirmation: hasUnmarkConfirmation,
                    //   likes: radar.likes,
                    //   unlikedColor: Theme.of(context).colorScheme.caption,
                    // ),
                    // const SizedBox(
                    //   width: 4.0,
                    // ),
                    BookmarkButton(
                      itemId: radar.id,
                      type: 'radar',
                      gestureSize: 22,
                      value: radar.marked,
                      onMarkChanged: (value) =>
                          onMarkChanged(radar.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: [
            ShimmerPlaceholder(height: 16),
            SizedBox(height: 8),
            ShimmerPlaceholder(
              width: 200,
              height: 16,
            ),
            SizedBox(height: 16),
            AspectRatio(aspectRatio: 16 / 9, child: ShimmerPlaceholder()),
            SizedBox(height: 8),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                ShimmerPlaceholder(
                  height: 12,
                  width: 70,
                ),
                ShimmerPlaceholder(
                  height: 12,
                  width: 70,
                ),
              ],
            ),
            SizedBox(height: 8),
            ShimmerPlaceholder(
              height: 16,
            ),
            SizedBox(height: 8),
            ShimmerPlaceholder(
              height: 16,
            ),
            SizedBox(height: 8),
            ShimmerPlaceholder(
              height: 16,
            ),
            DidvanDivider(),
            Row(
              children: [
                ShimmerPlaceholder(
                  height: 32,
                  width: 32,
                ),
                Spacer(),
                ShimmerPlaceholder(
                  height: 32,
                  width: 32,
                ),
                SizedBox(width: 16),
                ShimmerPlaceholder(
                  height: 32,
                  width: 32,
                ),
              ],
            ),
          ],
        ),
      );
}