import 'dart:convert';

import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';
import 'package:remever/common/functions.dart';
import 'package:remever/common/resources.dart';
import 'package:remever/common/widgets/typography.dart';
import 'package:remever/common/widgets/w_if.dart';
import 'package:remever/common/widgets/wspace.dart';
import 'package:remever/components/extensions/context.dart';
import 'package:remever/database/database.dart';
import 'package:remever/gen/assets.gen.dart';
import 'package:remever/router.gr.dart';
import 'package:remever/screens/collections/widgets/collection_progress_bar.dart';
import 'package:remever/screens/dialogs/action_dialog.dart';

class CollectionCard extends StatelessWidget {
  const CollectionCard({super.key, required this.collection});

  final Collection collection;

  void _onCollectionTap(BuildContext context) {
    context.pushRoute(CollectionDetailRoute(collection: collection));
  }

  @override
  Widget build(BuildContext context) {
    return Slidable(
      endActionPane: ActionPane(
        extentRatio: 0.62,
        motion: const StretchMotion(),
        children: <Widget>[
          const WSpace(8),
          _buildSlidableAction(
            context: context,
            backgroundColor: const Color(0xFFD7E6F4),
            foregroundColor: const Color(0xFF0058AB),
            icon: Icons.info_outline,
            onPressed: () {
              showInfoToast('Пока недоступно');
            },
          ),
          const WSpace(8),
          _buildSlidableAction(
            context: context,
            backgroundColor: const Color(0xFFFFE4E6),
            foregroundColor: const Color(0xFFFF5C69),
            icon:
                collection.isLiked
                    ? Icons.favorite_outlined
                    : Icons.favorite_border,
            onPressed: () {
              showInfoToast('Пока недоступно');
            },
          ),
          const WSpace(8),
          _buildSlidableAction(
            context: context,
            backgroundColor: AppColors.secondary,
            foregroundColor: AppColors.primary,
            icon: Icons.visibility_off_outlined,
            onPressed: () {
              showInfoToast('Пока недоступно');
            },
          ),
        ],
      ),
      child: GestureDetector(
        onTap: () => _onCollectionTap(context),
        child: Container(
          constraints: BoxConstraints(minHeight: 66.h, maxHeight: 84.h),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(12).r,
            color: AppColors.white,
          ),
          padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8).r,
          child: Row(
            children: <Widget>[
              _buildAvatar(),
              const WSpace(5),
              _buildInfo(),
              const Spacer(),
              GestureDetector(
                onTap: () {
                  showCuperModalBottomSheet(
                    context: context,
                    height: 477.h,
                    builder:
                        (BuildContext context) =>
                            ActionDialog(collection: collection),
                  );
                },
                child: Assets.icons.typeMenuVertical.image(
                  height: 24.h,
                  width: 24.w,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  ///
  /// Построение основной информации
  ///
  Widget _buildInfo() {
    return SizedBox(
      width: 230.w,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          _buildTitle(),
          const HSpace(4),
          _buildLikeAndCardsLength(),
          const HSpace(6),
          const CollectionProgressBar(),
        ],
      ),
    );
  }

  ///
  /// Построение кол-ва карточек и лайков
  ///
  Widget _buildLikeAndCardsLength() {
    return Row(
      children: <Widget>[
        _buildIconWithText(
          icon: Assets.icons.typeCards,
          color: AppColors.disabled,
          text: collection.likesCount.toString(),
        ),
        const WSpace(8),
        _buildIconWithText(
          icon:
              collection.isLiked
                  ? Assets.icons.typeLike1818
                  : Assets.icons.typeLike,
          color: AppColors.danger,
          text: collection.likesCount.toString(),
        ),
      ],
    );
  }

  ///
  /// Название коллекции
  ///
  Widget _buildTitle() {
    return AppTypography(
      collection.title,
      type: Medium16px(),
      maxLines: 2,
      softWrap: true,
    );
  }

  ///
  /// Обложка коллекции
  ///
  Widget _buildAvatar() {
    return SizedBox.square(
      dimension: 50.r,
      child: DecoratedBox(
        decoration: BoxDecoration(shape: BoxShape.circle, color: AppColors.bg),

        child: Wif(
          condition: collection.image != null,
          builder:
              (context) => ClipOval(
                child: Image.memory(collection.image!, fit: BoxFit.cover),
              ),
          fallback:
              (context) => Center(
                child: AppTypography(
                  collection.title.substring(0, 1),
                  type: Bold34px(),
                ),
              ),
        ),
      ),
    );
  }

  ///
  /// Кнопка в меню свайпа
  ///
  Widget _buildSlidableAction({
    required BuildContext context,
    required Color backgroundColor,
    required Color foregroundColor,
    required IconData icon,
    required VoidCallback onPressed,
  }) {
    return SlidableAction(
      borderRadius: BorderRadius.circular(12).r,
      onPressed: (_) => onPressed(),
      backgroundColor: backgroundColor,
      foregroundColor: foregroundColor,
      icon: icon,
    );
  }

  ///
  /// Построение инфо
  ///
  Widget _buildIconWithText({
    required AssetGenImage icon,
    required Color color,
    required String text,
  }) {
    return Row(
      children: <Widget>[
        icon.image(height: 18.h, width: 18.w, color: color),
        const WSpace(2),
        AppTypography(text, type: Regular14px(), color: color),
      ],
    );
  }
}
