import 'package:didvan/config/design_config.dart';
import 'package:didvan/models/story_model.dart';
import 'package:didvan/routes/routes.dart';
import 'package:flutter/material.dart';
import 'package:didvan/config/theme_data.dart';

class StorySection extends StatelessWidget {
  final List<UserStories> stories;

  const StorySection({super.key, required this.stories});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 110.0,
      child: ListView.builder(
        padding: const EdgeInsets.symmetric(horizontal: 8.0),
        scrollDirection: Axis.horizontal,
        reverse: true,
        itemCount: stories.length,
        itemBuilder: (BuildContext context, int index) {
          final userStories = stories[index];
          return Padding(
            padding: const EdgeInsets.symmetric(horizontal: 4.0),
            child: _StoryCircle(
              userStories: userStories,
              onTap: () {
                Navigator.of(context).pushNamed(
                  Routes.storyViewer,
                  arguments: {
                    'stories': stories,
                    'tappedIndex': index,
                  },
                );
              },
            ),
          );
        },
      ),
    );
  }
}

class _StoryCircle extends StatelessWidget {
  final UserStories userStories;
  final VoidCallback onTap;

  const _StoryCircle({required this.userStories, required this.onTap});

  @override
  Widget build(BuildContext context) {
    final allStoriesViewed = ValueNotifier<bool>(
        userStories.stories.every((story) => story.isViewed.value));

    for (var story in userStories.stories) {
      story.isViewed.addListener(() {
        allStoriesViewed.value =
            userStories.stories.every((s) => s.isViewed.value);
      });
    }

    return InkWell(
      onTap: onTap,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ValueListenableBuilder<bool>(
            valueListenable: allStoriesViewed,
            builder: (context, isViewed, child) {
              return Hero(
                tag: userStories.user.name,
                child: Container(
                  width: 85.0,
                  height: 85.0,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  gradient: isViewed
                      ? LinearGradient(
                          colors: [
                            Theme.of(context).colorScheme.cardBorder,
                            Theme.of(context).colorScheme.cardBorder,
                          ],
                        )
                      : LinearGradient(
                          colors: [
                            Theme.of(context).colorScheme.primary,
                            Theme.of(context).colorScheme.primary,
                          ],
                          begin: Alignment.topRight,
                          end: Alignment.bottomLeft,
                        ),
                ),
                child: Padding(
                  padding: const EdgeInsets.all(4.0),
                  child: Container(
                    decoration: BoxDecoration(
                      color: Theme.of(context).colorScheme.surface,
                      shape: BoxShape.circle,
                    ),
                    child: Padding(
                      padding: const EdgeInsets.all(4.0),
                      child: CircleAvatar(
                        backgroundColor: Theme.of(context).colorScheme.splash,
                        child: ClipOval(
                          child: Image.asset(
                            userStories.user
                                .profileImageUrl,
                                color: DesignConfig.isDark ? Colors.grey : null,
                            fit: BoxFit.cover,
                            width: 50.0,
                            height: 50.0,
                            errorBuilder: (context, error, stackTrace) {
                              return Icon(Icons.person,
                                  color: Theme.of(context).colorScheme.caption, size: 40.0);
                            },
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
                ),
              );
            },
          ),
          const SizedBox(height: 6.0),
          Text(
            userStories.user.name,
            style: const TextStyle(fontSize: 12.0, fontWeight: FontWeight.w500),
            overflow: TextOverflow.ellipsis,
          ),
        ],
      ),
    );
  }
}