mohemm-flutter-app/lib/ui/chat/chat_bubble.dart

import 'dart:typed_data';

import 'package:flutter/material.dart';
import 'package:mohem_flutter_app/api/api_client.dart';
import 'package:mohem_flutter_app/api/chat/chat_api_client.dart';
import 'package:mohem_flutter_app/app_state/app_state.dart';
import 'package:mohem_flutter_app/classes/colors.dart';
import 'package:mohem_flutter_app/extensions/int_extensions.dart';
import 'package:mohem_flutter_app/extensions/string_extensions.dart';
import 'package:mohem_flutter_app/extensions/widget_extensions.dart';
import 'package:mohem_flutter_app/main.dart';
import 'package:mohem_flutter_app/models/chat/get_single_user_chat_list_model.dart';
import 'package:mohem_flutter_app/ui/chat/chat_full_image_preview.dart';
import 'package:mohem_flutter_app/widgets/bottom_sheet.dart';

// todo: @aamir use extension methods, and use correct widgets.

class ChatBubble extends StatelessWidget {
  ChatBubble({Key? key, required this.dateTime, required this.cItem}) : super(key: key);
  final String dateTime;
  final SingleUserChatModel cItem;

  bool isCurrentUser = false;
  bool isSeen = false;
  bool isReplied = false;
  int? fileTypeID;

  String? fileTypeDescription;
  bool isDelivered = false;
  String userName = '';

  void makeAssign() {
    isCurrentUser = cItem.currentUserId == AppState().chatDetails!.response!.id ? true : false;
    isSeen = cItem.isSeen == true ? true : false;
    isReplied = cItem.userChatReplyResponse != null ? true : false;
    fileTypeID = cItem.fileTypeId;
    fileTypeDescription = cItem.fileTypeResponse != null ? cItem.fileTypeResponse!.fileTypeDescription : "";
    isDelivered = cItem.currentUserId == AppState().chatDetails!.response!.id && cItem.isDelivered == true ? true : false;
    userName = AppState().chatDetails!.response!.userName == cItem.currentUserName.toString() ? "You" : cItem.currentUserName.toString();
  }

  @override
  Widget build(BuildContext context) {
    makeAssign();
    return isCurrentUser ? currentUser(context) : receiptUser(context);
  }

  Widget currentUser(context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        if (isReplied)
          ClipRRect(
            borderRadius: BorderRadius.circular(5.0),
            child: Container(
              width: double.infinity,
              decoration: BoxDecoration(
                border: Border(
                  left: BorderSide(width: 6, color: isCurrentUser ? MyColors.gradiantStartColor : MyColors.white),
                ),
                color: isCurrentUser ? MyColors.black.withOpacity(0.10) : MyColors.black.withOpacity(0.30),
              ),
              child: Row(
                children: [
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      (userName).toText12(color: MyColors.gradiantStartColor, isBold: false).paddingOnly(right: 5, top: 5, bottom: 0, left: 5),
                      (cItem.userChatReplyResponse != null ? cItem.userChatReplyResponse!.contant.toString() : "")
                          .toText10(color: isCurrentUser ? MyColors.grey71Color : MyColors.white.withOpacity(0.5), isBold: false, maxlines: 4)
                          .paddingOnly(right: 5, top: 5, bottom: 8, left: 5),
                    ],
                  ).expanded,
                  if (cItem.userChatReplyResponse != null && cItem.userChatReplyResponse!.fileTypeId == 12 ||
                      cItem.userChatReplyResponse!.fileTypeId == 3 ||
                      cItem.userChatReplyResponse!.fileTypeId == 4)
                    ClipRRect(
                      borderRadius: BorderRadius.circular(
                        8,
                      ),
                      child: showImage(
                              isReplyPreview: true,
                              fileName: cItem.userChatReplyResponse!.contant!,
                              fileTypeDescription: cItem.userChatReplyResponse!.fileTypeResponse!.fileTypeDescription ?? "image/jpg")
                          .paddingOnly(left: 10, right: 10, bottom: 16, top: 16),
                    )
                ],
              ),
            ),
          ).paddingOnly(right: 5, bottom: 7),
        if (fileTypeID == 12 || fileTypeID == 4 || fileTypeID == 3)
          showImage(isReplyPreview: false, fileName: cItem.contant!, fileTypeDescription: cItem.fileTypeResponse!.fileTypeDescription).paddingOnly(right: 5).onPress(() {
            showDialog(context: context, builder: (index) => ChatImagePreviewScreen(imgTitle: cItem.contant!, img: cItem.image!));
          }),
        cItem.contant!.toText12(),
        Align(
          alignment: Alignment.centerRight,
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              dateTime.toText10(
                color: MyColors.grey41Color.withOpacity(.5),
              ),
              7.width,
              Icon(isDelivered ? Icons.done_all : Icons.done_all, color: isSeen ? MyColors.textMixColor : MyColors.grey9DColor, size: 14),
            ],
          ),
        ),
      ],
    ).paddingOnly(top: 11, left: 13, right: 7, bottom: 5).objectContainerView(disablePadding: true).paddingOnly(left: MediaQuery.of(context).size.width * 0.3);
  }

  Widget receiptUser(context) {
    return Container(
      padding: const EdgeInsets.only(top: 11, left: 13, right: 7, bottom: 5),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        gradient: const LinearGradient(
          transform: GradientRotation(.83),
          begin: Alignment.topRight,
          end: Alignment.bottomLeft,
          colors: <Color>[
            MyColors.gradiantEndColor,
            MyColors.gradiantStartColor,
          ],
        ),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          if (isReplied)
            ClipRRect(
              borderRadius: BorderRadius.circular(5.0),
              child: Container(
                width: double.infinity,
                decoration: BoxDecoration(
                  border: Border(left: BorderSide(width: 6, color: isCurrentUser ? MyColors.gradiantStartColor : MyColors.white)),
                  color: isCurrentUser ? MyColors.black.withOpacity(0.10) : MyColors.black.withOpacity(0.30),
                ),
                child: Row(
                  children: [
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        (userName).toText12(color: MyColors.gradiantStartColor, isBold: false).paddingOnly(right: 5, top: 5, bottom: 0, left: 5),
                        (cItem.userChatReplyResponse != null ? cItem.userChatReplyResponse!.contant.toString() : "")
                            .toText10(color: isCurrentUser ? MyColors.grey71Color : MyColors.white.withOpacity(0.5), isBold: false, maxlines: 4)
                            .paddingOnly(right: 5, top: 5, bottom: 8, left: 5),
                      ],
                    ).expanded,
                    if (cItem.userChatReplyResponse != null && cItem.userChatReplyResponse!.fileTypeId == 12 ||
                        cItem.userChatReplyResponse!.fileTypeId == 3 ||
                        cItem.userChatReplyResponse!.fileTypeId == 4)
                      ClipRRect(
                        borderRadius: BorderRadius.circular(8.0),
                        child: showImage(
                                isReplyPreview: true,
                                fileName: cItem.userChatReplyResponse!.contant!,
                                fileTypeDescription: cItem.userChatReplyResponse!.fileTypeResponse!.fileTypeDescription ?? "image/jpg")
                            .paddingOnly(left: 10, right: 10, bottom: 16, top: 16),
                      )
                  ],
                ),
              ),
            ).paddingOnly(right: 5, bottom: 7),
          if (fileTypeID == 12 || fileTypeID == 4 || fileTypeID == 3)
            showImage(isReplyPreview: false, fileName: cItem.contant!, fileTypeDescription: cItem.fileTypeResponse!.fileTypeDescription ?? "image/jpg").paddingOnly(right: 5).onPress(() {
              showDialog(context: context, builder: (index) => ChatImagePreviewScreen(imgTitle: cItem.contant!, img: cItem.image!));
            })
          else
            (cItem.contant! ?? "").toText12(color: Colors.white),
          Align(
            alignment: Alignment.centerRight,
            child: dateTime.toText10(
              color: Colors.white.withOpacity(.71),
            ),
          ),
        ],
      ),
    ).paddingOnly(right: MediaQuery.of(context).size.width * 0.3);
  }

  Widget showImage({required bool isReplyPreview, required String fileName, required String fileTypeDescription}) {
    if (cItem.isImageLoaded! && cItem.image != null) {
      return Image.memory(
        cItem.image!,
        height: isReplyPreview ? 32 : 140,
        width: isReplyPreview ? 32 : 227,
        fit: BoxFit.cover,
      );
    } else {
      return FutureBuilder<Uint8List>(
        future: ChatApiClient().downloadURL(fileName: fileName, fileTypeDescription: fileTypeDescription),
        builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
          if (snapshot.connectionState != ConnectionState.waiting) {
            if (snapshot.data == null) {
              return SizedBox();
            } else {
              //data = image;
              cItem.image = snapshot.data;
              cItem.isImageLoaded = true;
              return Image.memory(
                snapshot.data,
                height: isReplyPreview ? 32 : 140,
                width: isReplyPreview ? 32 : 227,
                fit: BoxFit.cover,
              );
            }
          } else {
            return SizedBox(
              height: isReplyPreview ? 32 : 140,
              width: isReplyPreview ? 32 : 227,
              child: const Center(child: CircularProgressIndicator()),
            );
          }
        },
      );
    }
  }
}