import 'package:didvan/constants/app_icons.dart';
import 'package:didvan/models/home_page_content/content.dart';
import 'package:didvan/utils/date_time.dart';
import 'package:didvan/views/home/home_state.dart';
import 'package:didvan/views/widgets/didvan/card.dart';
import 'package:didvan/views/widgets/didvan/text.dart';
import 'package:didvan/views/widgets/skeleton_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:provider/provider.dart';

class MainPageRadarItem extends StatelessWidget {
  final MainPageContentType content;
  const MainPageRadarItem({super.key, required this.content});

  @override
  Widget build(BuildContext context) {
    return DidvanCard(
      padding: EdgeInsets.zero,
      child: Stack(
        children: [
          Column(
            children: [
              SkeletonImage(
                imageUrl: content.image,
                width: double.infinity,
                height: 76,
              ),
              Padding(
                padding:
                    const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    DidvanText(
                      content.title,
                      style: Theme.of(context).textTheme.bodyLarge,
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                    ),
                    Padding(
                      padding: const EdgeInsets.symmetric(vertical: 4),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Row(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              const Icon(
                                DidvanIcons.calendar_day_light,
                                size: 16,
                              ),
                              DidvanText(
                                DateTimeUtils.momentGenerator(
                                    content.subtitles[0]),
                                maxLines: 1,
                                overflow: TextOverflow.ellipsis,
                                style: Theme.of(context).textTheme.bodySmall,
                              ),
                            ],
                          ),
                          Row(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              const Icon(
                                DidvanIcons.timer_light,
                                size: 16,
                              ),
                              DidvanText(
                                '${content.subtitles[1]} دقیقه',
                                maxLines: 1,
                                overflow: TextOverflow.ellipsis,
                                style: Theme.of(context).textTheme.bodySmall,
                              ),
                            ],
                          ),
                        ],
                      ),
                    )
                  ],
                ),
              ),
            ],
          ),
          Center(
            child: Container(
              margin: EdgeInsets.only(
                right: MediaQuery.of(context).size.width * 0.4,
              ),
              width: 36,
              height: 36,
              padding: const EdgeInsets.all(4),
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: Theme.of(context).colorScheme.surface,
              ),
              child: SvgPicture.asset(
                context
                        .read<HomeState>()
                        .categories
                        .firstWhere((element) =>
                            element.id.toString() == content.subtitles[2])
                        .asset ??
                    '',
              ),
            ),
          ),
        ],
      ),
    );
  }
}