import 'package:didvan/config/design_config.dart';
import 'package:didvan/config/theme_data.dart';
import 'package:didvan/views/mentions/mentions_state.dart';
import 'package:didvan/views/widgets/animated_visibility.dart';
import 'package:didvan/views/widgets/ink_wrapper.dart';
import 'package:didvan/views/widgets/skeleton_image.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import '../../constants/app_icons.dart';
import '../../models/users_mention.dart';
import 'didvan/text.dart';

class UserMention extends StatefulWidget {
  final UsersMention user;
  final int index;

  const UserMention({
    super.key,
    required this.user,
    required this.index,
  });

  @override
  State<UserMention> createState() => _UserMentionState();
}

class _UserMentionState extends State<UserMention> {
  @override
  Widget build(BuildContext context) {
    final state = context.watch<MentionsState>();
    final userFound = state.mentionedUsers.contains(widget.user);

    return InkWrapper(
      onPressed: () {
        if (userFound) {
          state.mentionedUsers.remove(widget.user);
        } else {
          state.mentionedUsers.add(widget.user);
        }

        state.update();
      },
      child: Column(
        children: [
          const SizedBox(
            height: 8,
          ),
          Row(
            children: [
              Container(
                width: 18,
                height: 18,
                decoration: BoxDecoration(
                  color: Colors.transparent,
                  borderRadius: BorderRadius.circular(6),
                  border: Border.all(
                      width: 1.0,
                      color: userFound
                          ? Theme.of(context).colorScheme.checkFav
                          : Theme.of(context).colorScheme.text),
                ),
                margin: const EdgeInsets.all(8),
                child: AnimatedVisibility(
                  isVisible: userFound,
                  duration: DesignConfig.mediumAnimationDuration,
                  child: Center(
                    child: Icon(
                      Icons.check,
                      size: 12,
                      color: userFound
                          ? Theme.of(context).colorScheme.checkFav
                          : Theme.of(context).colorScheme.text,
                    ),
                  ),
                ),
              ),
              widget.user.photo == null
                  ? const Icon(
                      DidvanIcons.avatar_light,
                      size: 40,
                    )
                  : SkeletonImage(
                      imageUrl: widget.user.photo.toString(),
                      height: 36,
                      width: 36,
                      borderRadius: BorderRadius.circular(360),
                    ),
              const SizedBox(
                width: 8,
              ),
              DidvanText(
                widget.user.name.toString(),
                style: Theme.of(context).textTheme.bodyMedium,
              ),
            ],
          ),
          const SizedBox(
            height: 8,
          ),
          widget.index == state.users.length - 1
              ? const SizedBox()
              : Divider(
                  height: 2,
                  color: Theme.of(context).colorScheme.splash,
                )
        ],
      ),
    );
  }
}