didvan-app/lib/views/direct/widgets/message_box.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/views/direct/direct_state.dart';
import 'package:didvan/views/direct/widgets/audio_widget.dart';
import 'package:didvan/views/widgets/didvan/icon_button.dart';
import 'package:didvan/views/widgets/didvan/text.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Consumer<DirectState>(
          builder: (context, state, child) => state.replyRadar != null ||
                  state.replyNews != null
              ? _MessageBoxContainer(
                  isMessage: false,
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Row(
                      children: [
                        Expanded(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              const DidvanText(
                                'لینک به مطلب:',
                              ),
                              DidvanText(
                                state.replyRadar != null
                                    ? state.replyRadar!.title
                                    : state.replyNews!.title,
                                overflow: TextOverflow.ellipsis,
                                maxLines: 1,
                                color: Theme.of(context).colorScheme.primary,
                              ),
                            ],
                          ),
                        ),
                        DidvanIconButton(
                          icon: DidvanIcons.close_regular,
                          gestureSize: 24,
                          onPressed: () {
                            state.replyRadar = null;
                            state.replyNews = null;
                            state.update();
                          },
                        ),
                      ],
                    ),
                  ),
                )
              : const SizedBox(),
        ),
        _MessageBoxContainer(
          isMessage: true,
          child: Consumer<DirectState>(
            builder: (context, state, child) {
              if (state.isRecording) {
                return const _Recording();
              } else if (!state.isRecording && state.recordedFile != null) {
                return const _RecordChecking();
              }
              return const _Typing();
            },
          ),
        ),
      ],
    );
  }
}

class _MessageBoxContainer extends StatelessWidget {
  final Widget child;
  final bool isMessage;
  const _MessageBoxContainer({
    Key? key,
    required this.child,
    required this.isMessage,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: isMessage ? 68 : null,
      decoration: BoxDecoration(
        border: Border(
          top: BorderSide(
            color: Theme.of(context).colorScheme.cardBorder,
          ),
        ),
        color: Theme.of(context).colorScheme.surface,
      ),
      child: child,
    );
  }
}

class _Typing extends StatefulWidget {
  const _Typing({Key? key}) : super(key: key);

  @override
  State<_Typing> createState() => _TypingState();
}

class _TypingState extends State<_Typing> {
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    final state = context.watch<DirectState>();
    return Row(
      children: [
        Expanded(
          flex: 2,
          child: AnimatedSwitcher(
            duration: DesignConfig.lowAnimationDuration,
            transitionBuilder: (child, animation) => ScaleTransition(
              scale: animation,
              child: child,
            ),
            child: state.text != null && state.text!.isNotEmpty
                ? DidvanIconButton(
                    icon: DidvanIcons.send_solid,
                    onPressed: () {
                      _formKey.currentState!.reset();
                      state.sendMessage();
                    },
                    size: 32,
                    color: Theme.of(context).colorScheme.focusedBorder,
                  )
                : kIsWeb
                    ? null
                    : DidvanIconButton(
                        icon: DidvanIcons.mic_solid,
                        onPressed: state.startRecording,
                        size: 32,
                        color: Theme.of(context).colorScheme.focusedBorder,
                      ),
          ),
        ),
        Expanded(
          flex: 15,
          child: Form(
            key: _formKey,
            child: TextFormField(
              textInputAction: TextInputAction.send,
              style: Theme.of(context).textTheme.bodyMedium,
              decoration: InputDecoration(
                border: InputBorder.none,
                hintText: 'بنویسید یا پیام صوتی بگذارید...',
                hintStyle: Theme.of(context).textTheme.bodySmall!.copyWith(
                    color: Theme.of(context).colorScheme.disabledText),
              ),
              onChanged: (value) {
                if (value.length <= 1) {
                  setState(() {});
                }
                state.text = value;
              },
            ),
          ),
        ),
      ],
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final state = context.read<DirectState>();
    return Row(
      children: [
        DidvanIconButton(
          icon: DidvanIcons.send_solid,
          onPressed: () => state.stopRecording(sendImidiately: true),
          gestureSize: 52,
        ),
        Expanded(
          child: DidvanText(
            'در حال ضبط صدا ...',
            style: Theme.of(context).textTheme.bodySmall,
          ),
        ),
        DidvanIconButton(
          icon: DidvanIcons.stop_circle_solid,
          color: Theme.of(context).colorScheme.secondary,
          onPressed: () => state.stopRecording(sendImidiately: false),
          size: 32,
        ),
      ],
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final state = context.read<DirectState>();
    return Row(
      children: [
        DidvanIconButton(
          icon: DidvanIcons.send_solid,
          onPressed: state.sendMessage,
          color: Theme.of(context).colorScheme.focusedBorder,
        ),
        Expanded(
          child: Padding(
            padding: const EdgeInsets.symmetric(vertical: 8),
            child: AudioWidget(
              audioFile: state.recordedFile!,
              id: 0,
            ),
          ),
        ),
        DidvanIconButton(
          icon: DidvanIcons.trash_solid,
          color: Theme.of(context).colorScheme.secondary,
          onPressed: state.deleteRecordedFile,
        ),
      ],
    );
  }
}