import 'package:didvan/config/theme_data.dart';
import 'package:didvan/views/widgets/ink_wrapper.dart';
import 'package:didvan/views/widgets/skeleton_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import '../../config/design_config.dart';
import '../../constants/app_icons.dart';
import '../../models/users_mention.dart';
import '../comments/comments_state.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<CommentsState>();

    return InkWrapper(
      onPressed: () {
        state.usersMentioned = widget.user;
        state.commentTextFieldController.text = state
            .commentTextFieldController.text
            .replaceAll(state.mentionedText.toString(), "")
            .replaceAll("@", "");
        state.showUsersForMentionsLayout = false;
        state.update();
      },
      child: Column(
        children: [
          Row(
            children: [
              widget.user.photo == null
                  ? const Icon(DidvanIcons.avatar_light,size: 40,)
                  : SkeletonImage(
                      imageUrl: widget.user.photo.toString(),
                      height: 40,
                      width: 40,
                      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.usersMention.length - 1
              ? const SizedBox()
              : Divider(
                  height: 2,
                  color: Theme.of(context).colorScheme.splash,
                )
        ],
      ),
    );
  }
}