part of 'home_page.dart';

typedef OnReactionCallback = void Function(
    String? id, String nickname, bool isLiked, bool isDisliked)?;

class _Comment extends StatelessWidget {
  final String? id;
  final String title;
  final String text;
  final UserData user;
  final bool isLiked;
  final bool isDisliked;
  final OnReactionCallback? onLike;
  final OnReactionCallback? onDislike;
  final VoidCallback? onTap;

  const _Comment({
    this.id,
    required this.title,
    required this.text,
    required this.user,
    this.isLiked = false,
    this.isDisliked = false,
    this.onLike,
    this.onDislike,
    this.onTap,
  });

  factory _Comment.fromData(
    CommentData data, {
    bool isLiked = false,
    bool isDisliked = false,
    OnReactionCallback? onLike,
    OnReactionCallback? onDislike,
    VoidCallback? onTap,
  }) =>
      _Comment(
        id: data.id,
        title: data.title,
        text: data.text,
        user: data.user,
        isLiked: isLiked,
        isDisliked: isDisliked,
        onLike: onLike,
        onDislike: onDislike,
        onTap: onTap,
      );

  void _onLike() {
    onLike?.call(id, user.nickname, isLiked, isDisliked);
  }

  void _onDislike() {
    onDislike?.call(id, user.nickname, isLiked, isDisliked);
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        margin: const EdgeInsets.all(16),
        padding: const EdgeInsets.all(16),
        decoration: BoxDecoration(
          color: Colors.white70,
          borderRadius: BorderRadius.circular(16),
          border: Border.all(color: Colors.grey),
          boxShadow: [
            BoxShadow(
              color: Colors.grey.withOpacity(.5),
              spreadRadius: 4,
              offset: const Offset(0, 5),
              blurRadius: 8,
            ),
          ],
        ),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Column(
              children: [
                ClipRRect(
                  borderRadius: BorderRadius.circular(30),
                  child: SizedBox(
                    height: 80,
                    width: 80,
                    child: user.avatarUrl != null && user.avatarUrl!.isNotEmpty
                        ? Image.network(
                            user.avatarUrl!,
                            fit: BoxFit.cover,
                          )
                        : Container(
                            height: 80,
                            width: 80,
                            color: Colors.grey,
                            child: const Icon(Icons.person, size: 40),
                          ),
                  ),
                ),
                const SizedBox(height: 8),
                SizedBox(
                  width: 80,
                  child: Text(
                    user.nickname,
                    style: Theme.of(context).textTheme.bodyMedium,
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    textAlign: TextAlign.center,
                  ),
                ),
                Row(
                  children: [
                    IconButton(
                      iconSize: 20,
                      icon: Icon(
                        isLiked ? Icons.thumb_up : Icons.thumb_up_outlined,
                        color: isLiked ? Colors.blue : Colors.grey,
                      ),
                      onPressed: _onLike,
                    ),
                    IconButton(
                      iconSize: 20,
                      icon: Icon(
                        isDisliked
                            ? Icons.thumb_down
                            : Icons.thumb_down_outlined,
                        color: isDisliked ? Colors.red : Colors.grey,
                      ),
                      onPressed: _onDislike,
                    ),
                  ],
                ),
              ],
            ),
            Expanded(
              child: Padding(
                padding: const EdgeInsets.only(left: 16.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      title,
                      style: Theme.of(context).textTheme.headlineSmall,
                    ),
                    const SizedBox(height: 8),
                    Text(
                      text,
                      style: Theme.of(context).textTheme.bodyLarge,
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}