didvan-app/lib/views/home/comments/comments.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/constants/assets.dart';
import 'package:didvan/models/view/app_bar_data.dart';
import 'package:didvan/views/home/comments/comments_state.dart';
import 'package:didvan/views/home/comments/widgets/comment_item.dart';
import 'package:didvan/views/widgets/animated_visibility.dart';
import 'package:didvan/views/widgets/didvan/icon_button.dart';
import 'package:didvan/views/widgets/didvan/scaffold.dart';
import 'package:didvan/views/widgets/didvan/text.dart';
import 'package:didvan/views/widgets/shimmer_placeholder.dart';
import 'package:didvan/views/widgets/state_handlers/empty_state.dart';
import 'package:didvan/views/widgets/state_handlers/sliver_state_handler.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class Comments extends StatefulWidget {
  final Map<String, dynamic> pageData;
  const Comments({
    Key? key,
    required this.pageData,
  }) : super(key: key);

  @override
  _CommentsState createState() => _CommentsState();
}

class _CommentsState extends State<Comments> {
  final _focusNode = FocusNode();
  double _bottomPadding = 0;

  @override
  void initState() {
    final state = context.read<CommentsState>();
    state.itemId = widget.pageData['id'];
    state.type = widget.pageData['type'];
    state.onCommentsChanged = widget.pageData['onCommentsChanged'];
    Future.delayed(
      Duration.zero,
      () => state.getComments(),
    );
    super.initState();
  }

  bool get _isPage => widget.pageData['isPage'] != false;

  @override
  Widget build(BuildContext context) {
    final bottomViewInset = MediaQuery.of(context).viewInsets.bottom;
    if (bottomViewInset == 0) {
      if (_bottomPadding != 0) {
        FocusScope.of(context).unfocus();
        _bottomPadding = 0;
      }
    }
    _bottomPadding = bottomViewInset;
    return Material(
      child: Stack(
        children: [
          DidvanScaffold(
            physics: const BouncingScrollPhysics(),
            backgroundColor: Theme.of(context).colorScheme.surface,
            appBarData: _isPage
                ? AppBarData(
                    hasBack: true,
                    title: 'نظرات',
                    subtitle: widget.pageData['title'],
                  )
                : null,
            padding: const EdgeInsets.only(left: 16, right: 16, bottom: 92),
            slivers: [
              Consumer<CommentsState>(
                builder: (context, state, child) =>
                    SliverStateHandler<CommentsState>(
                  onRetry: state.getComments,
                  state: state,
                  itemPadding: const EdgeInsets.symmetric(vertical: 16),
                  childCount: state.comments.length,
                  placeholder: const _CommentPlaceholder(),
                  centerEmptyState: _isPage,
                  enableEmptyState: state.comments.isEmpty,
                  emptyState: EmptyState(
                    asset: Assets.emptyChat,
                    title: 'اولین نظر را بنویسید...',
                  ),
                  builder: (context, state, index) => Comment(
                    focusNode: _focusNode,
                    comment: state.comments[index],
                  ),
                ),
              ),
            ],
          ),
          Positioned(
            left: 0,
            right: 0,
            bottom: MediaQuery.of(context).viewInsets.bottom,
            child: _MessageBox(focusNode: _focusNode),
          ),
        ],
      ),
    );
  }
}

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

  @override
  State<_MessageBox> createState() => _MessageBoxState();
}

class _MessageBoxState extends State<_MessageBox> {
  final _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    final state = context.watch<CommentsState>();
    return Column(
      children: [
        AnimatedVisibility(
          duration: DesignConfig.lowAnimationDuration,
          isVisible: state.showReplyBox,
          child: Container(
            padding: const EdgeInsets.all(8),
            decoration: BoxDecoration(
              color: Theme.of(context).colorScheme.surface,
              border: Border(
                top: BorderSide(
                  color: Theme.of(context).colorScheme.border,
                ),
              ),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                if (state.replyingTo != null)
                  DidvanText(
                    'پاسخ به ${state.replyingTo!.fullName}:',
                    color: Theme.of(context).colorScheme.caption,
                    style: Theme.of(context).textTheme.caption,
                  ),
                const Spacer(),
                DidvanIconButton(
                  gestureSize: 24,
                  color: Theme.of(context).colorScheme.caption,
                  icon: DidvanIcons.close_regular,
                  onPressed: () {
                    state.commentId = null;
                    state.replyingTo = null;
                    state.showReplyBox = false;
                    state.update();
                  },
                ),
              ],
            ),
          ),
        ),
        Container(
          decoration: BoxDecoration(
            color: Theme.of(context).colorScheme.surface,
            border: Border(
              top: BorderSide(
                color: Theme.of(context).colorScheme.border,
              ),
            ),
          ),
          child: Row(
            children: [
              DidvanIconButton(
                onPressed: () => _onSend(state),
                icon: DidvanIcons.send_solid,
                size: 24,
                color: Theme.of(context).colorScheme.focusedBorder,
              ),
              Expanded(
                child: TextField(
                  focusNode: widget.focusNode,
                  controller: _controller,
                  keyboardType: TextInputType.multiline,
                  textInputAction: TextInputAction.send,
                  style: Theme.of(context).textTheme.bodyText2,
                  onEditingComplete: () {},
                  onSubmitted: (value) => _onSend(state),
                  decoration: InputDecoration(
                    border: InputBorder.none,
                    hintText: 'پیام خود را ارسال کنید',
                    hintStyle: Theme.of(context).textTheme.caption!.copyWith(
                        color: Theme.of(context).colorScheme.disabledText),
                  ),
                  onChanged: (value) => state.text = value,
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }

  void _onSend(CommentsState state) {
    if (state.text.replaceAll(' ', '').isNotEmpty) {
      state.addComment();
      _controller.text = '';
    }
  }
}

class _CommentPlaceholder extends StatelessWidget {
  const _CommentPlaceholder({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const ShimmerPlaceholder(
          height: 24,
          width: 24,
          borderRadius: DesignConfig.highBorderRadius,
        ),
        const SizedBox(width: 16),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: const [
                  ShimmerPlaceholder(
                    height: 20,
                    width: 100,
                  ),
                  ShimmerPlaceholder(
                    height: 14,
                    width: 100,
                  ),
                ],
              ),
              const SizedBox(height: 12),
              const ShimmerPlaceholder(
                height: 16,
                width: double.infinity,
              ),
              const SizedBox(height: 8),
              const ShimmerPlaceholder(
                height: 16,
                width: 200,
              ),
              const SizedBox(height: 8),
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: const [
                  ShimmerPlaceholder(
                    height: 24,
                    width: 48,
                  ),
                  SizedBox(width: 8),
                  ShimmerPlaceholder(
                    height: 24,
                    width: 48,
                  ),
                ],
              ),
            ],
          ),
        ),
      ],
    );
  }
}