part of 'home_page.dart';

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

class _Comment extends StatefulWidget {
  final String title;
  final String text;
  final UserModel? user;
  final OnActionCallback onAction;
  final VoidCallback? onTap;

  const _Comment({
    required this.title,
    required this.text,
    this.user,
    this.onAction,
    this.onTap,
  });

  factory _Comment.fromData(
    CommentModel model, {
    OnActionCallback onAction,
    VoidCallback? onTap,
  }) =>
      _Comment(
        title: model.title,
        text: model.text,
        user: model.user,
        onAction: onAction,
        onTap: onTap,
      );

  @override
  State<_Comment> createState() => _CommentState();
}

class _CommentState extends State<_Comment> {
  bool isLiked = false;
  bool isDisliked = false;

  void _onLike() {
    setState(() {
      isLiked = !isLiked;
      if (isLiked && isDisliked) {
        isDisliked = false;
      }
    });
    if (widget.onAction != null) {
      widget.onAction?.call(widget.user!.nickname, isLiked, isDisliked);
    }
  }

  void _onDislike() {
    setState(() {
      isDisliked = !isDisliked;
      if (isDisliked && isLiked) {
        isLiked = false;
      }
    });
    if (widget.onAction != null) {
      widget.onAction?.call(widget.user!.nickname, isLiked, isDisliked);
    }
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: widget.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: Image.network(
                      widget.user!.avatarUrl != null &&
                              widget.user!.avatarUrl!.isNotEmpty
                          ? widget.user!.avatarUrl!
                          : '',
                      fit: BoxFit.cover,
                      errorBuilder: (_, __, ___) => const Placeholder(),
                    ),
                  ),
                ),
                const SizedBox(height: 8),
                Text(
                  widget.user!.nickname,
                  style: Theme.of(context).textTheme.bodyMedium,
                ),
                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(
                      widget.title,
                      style: Theme.of(context).textTheme.headlineSmall,
                    ),
                    const SizedBox(height: 8),
                    Text(
                      widget.text,
                      style: Theme.of(context).textTheme.bodyLarge,
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}