didvan-app/lib/pages/home/comments/widgets/comment_item.dart

import 'package:didvan/config/design_config.dart';
import 'package:didvan/config/theme_data.dart';
import 'package:didvan/constants/app_icons.dart';
import 'package:didvan/models/comment/comment.dart';
import 'package:didvan/pages/home/comments/comments_state.dart';
import 'package:didvan/utils/date_time.dart';
import 'package:didvan/widgets/animated_visibility.dart';
import 'package:didvan/widgets/didvan/icon_button.dart';
import 'package:didvan/widgets/didvan/text.dart';
import 'package:didvan/widgets/ink_wrapper.dart';
import 'package:didvan/widgets/skeleton_image.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class Comment extends StatefulWidget {
  final FocusNode focusNode;
  final CommentData comment;
  const Comment({
    Key? key,
    required this.focusNode,
    required this.comment,
  }) : super(key: key);

  @override
  State<Comment> createState() => CommentState();
}

class CommentState extends State<Comment> {
  late final CommentsState state;

  bool _showSubComments = false;

  CommentData get _comment => widget.comment;

  @override
  void initState() {
    state = context.read<CommentsState>();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        _commentBuilder(comment: _comment),
        if (_comment.replies.isNotEmpty) const SizedBox(height: 16),
        for (var i = 0; i < _comment.replies.length; i++)
          AnimatedVisibility(
            duration: DesignConfig.lowAnimationDuration,
            isVisible: _showSubComments,
            child: _commentBuilder(
              isSubComment: true,
              comment: _comment.replies[i],
            ),
          ),
      ],
    );
  }

  Widget _commentBuilder({required comment, bool isSubComment = false}) =>
      Container(
        decoration: BoxDecoration(
          border: Border(
            right: isSubComment
                ? BorderSide(color: Theme.of(context).colorScheme.caption)
                : BorderSide.none,
          ),
        ),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            if (isSubComment) const SizedBox(width: 12),
            if (comment.user.photo == null)
              const Icon(DidvanIcons.avatar_light),
            if (comment.user.photo != null)
              SkeletonImage(
                imageUrl: comment.user.photo,
                height: 24,
                width: 24,
                borderRadius: DesignConfig.highBorderRadius,
              ),
            const SizedBox(width: 12),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      DidvanText(
                        comment.user.fullName,
                        style: Theme.of(context).textTheme.bodyText1,
                      ),
                      DidvanText(
                        DateTimeUtils.momentGenerator(comment.createdAt),
                        style: Theme.of(context).textTheme.caption,
                        color: Theme.of(context).colorScheme.caption,
                      ),
                    ],
                  ),
                  const SizedBox(height: 8),
                  if (isSubComment)
                    DidvanText(
                      'پاسخ به ${comment.toUser.fullName}',
                      style: Theme.of(context).textTheme.caption,
                      color: Theme.of(context).colorScheme.caption,
                    ),
                  const SizedBox(height: 8),
                  DidvanText(comment.text),
                  const SizedBox(height: 8),
                  Row(
                    children: [
                      InkWrapper(
                        onPressed: () {
                          state.commentId = _comment.id;
                          state.replyingTo = comment.user;
                          state.showReplyBox = true;
                          state.update();
                          widget.focusNode.requestFocus();
                        },
                        child: DidvanText(
                          'پاسخ',
                          style: Theme.of(context).textTheme.bodyText1,
                          color: Theme.of(context).colorScheme.primary,
                        ),
                      ),
                      if (!isSubComment) const SizedBox(width: 20),
                      if (!isSubComment && comment.replies.isNotEmpty)
                        InkWrapper(
                          onPressed: () => setState(
                            () => _showSubComments = !_showSubComments,
                          ),
                          child: Row(
                            children: [
                              DidvanText(
                                'پاسخ‌ها(${comment.replies.length})',
                                style: Theme.of(context).textTheme.bodyText1,
                                color: Theme.of(context).colorScheme.primary,
                              ),
                              AnimatedRotation(
                                duration: DesignConfig.lowAnimationDuration,
                                turns: _showSubComments ? 0.5 : 0,
                                child: Icon(
                                  DidvanIcons.angle_down_regular,
                                  color: Theme.of(context).colorScheme.primary,
                                ),
                              ),
                            ],
                          ),
                        ),
                      const Spacer(),
                      _FeedbackButtons(
                        likeCount: comment.feedback.like,
                        dislikeCount: comment.feedback.dislike,
                        likeValue: comment.liked,
                        dislikeValue: comment.disliked,
                        onFeedback: (like, dislike) =>
                            state.feedback(comment.id, like, dislike),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      );
}

class _FeedbackButtons extends StatefulWidget {
  final int likeCount;
  final int dislikeCount;
  final bool likeValue;
  final bool dislikeValue;
  final void Function(bool like, bool dislike) onFeedback;
  const _FeedbackButtons({
    Key? key,
    required this.onFeedback,
    required this.likeCount,
    required this.dislikeCount,
    required this.likeValue,
    required this.dislikeValue,
  }) : super(key: key);

  @override
  State<_FeedbackButtons> createState() => _FeedbackButtonsState();
}

class _FeedbackButtonsState extends State<_FeedbackButtons> {
  late bool _likeValue;
  late bool _dislikeValue;
  late int _likeCount;
  late int _dislikeCount;

  @override
  void initState() {
    _likeValue = widget.likeValue;
    _dislikeValue = widget.dislikeValue;
    _likeCount = widget.likeCount;
    _dislikeCount = widget.dislikeCount;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        DidvanText(
          _likeCount.toString(),
          style: Theme.of(context).textTheme.caption,
          color: Theme.of(context).colorScheme.caption,
        ),
        const SizedBox(width: 4),
        DidvanIconButton(
          icon: _likeValue ? DidvanIcons.like_solid : DidvanIcons.like_regular,
          color: _likeValue ? Theme.of(context).colorScheme.primary : null,
          gestureSize: 24,
          onPressed: () {
            setState(() {
              if (_likeValue) {
                _likeCount--;
              } else {
                _likeCount++;
                if (_dislikeValue) {
                  _dislikeValue = false;
                  _dislikeCount--;
                }
              }
              _likeValue = !_likeValue;
            });
            widget.onFeedback(_likeValue, _dislikeValue);
          },
        ),
        const SizedBox(width: 16),
        DidvanText(
          _dislikeCount.toString(),
          style: Theme.of(context).textTheme.caption,
          color: Theme.of(context).colorScheme.caption,
        ),
        const SizedBox(width: 4),
        DidvanIconButton(
          icon: _dislikeValue
              ? DidvanIcons.dislike_solid
              : DidvanIcons.dislike_regular,
          color: _dislikeValue ? Theme.of(context).colorScheme.secondary : null,
          gestureSize: 24,
          onPressed: () {
            setState(() {
              if (_dislikeValue) {
                _dislikeCount--;
              } else {
                _dislikeCount++;
                if (_likeValue) {
                  _likeValue = false;
                  _likeCount--;
                }
              }
              _dislikeValue = !_dislikeValue;
            });
            widget.onFeedback(_likeValue, _dislikeValue);
          },
        ),
      ],
    );
  }
}