import 'package:Envelope/components/view_image.dart';
import 'package:Envelope/models/image_message.dart';
import 'package:Envelope/models/my_profile.dart';
import 'package:Envelope/utils/time.dart';
import 'package:flutter/material.dart';

import '/models/messages.dart';

@immutable
class ConversationMessage extends StatelessWidget {
  const ConversationMessage({
    Key? key,
    required this.message,
    required this.profile,
    required this.index,
  }) : super(key: key);

  final Message message;
  final MyProfile profile;
  final int index;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.only(left: 14,right: 14,top: 0,bottom: 0),
      child: Align(
        alignment: (
        message.senderUsername == profile.username ?
          Alignment.topRight :
          Alignment.topLeft
      ),
        child: Column(
          crossAxisAlignment: message.senderUsername == profile.username ?
            CrossAxisAlignment.end :
            CrossAxisAlignment.start,
          children: <Widget>[

            messageContent(context),

            const SizedBox(height: 1.5),

            Row(
              mainAxisAlignment: message.senderUsername == profile.username ?
                MainAxisAlignment.end :
                MainAxisAlignment.start,
              children: <Widget>[
                const SizedBox(width: 10),
                usernameOrFailedToSend(index),
              ],
            ),

            const SizedBox(height: 1.5),

            Row(
              mainAxisAlignment: message.senderUsername == profile.username ?
                MainAxisAlignment.end :
                MainAxisAlignment.start,
              children: <Widget>[
                const SizedBox(width: 10),
                Text(
                  convertToAgo(message.createdAt),
                  textAlign: message.senderUsername == profile.username ?
                    TextAlign.left :
                    TextAlign.right,
                  style: TextStyle(
                    fontSize: 12,
                    color: Colors.grey[500],
                  ),
                ),
              ],
            ),

            index != 0 ?
              const SizedBox(height: 20) :
              const SizedBox.shrink(),
          ],
        )
      ),
    );
  }

  Widget messageContent(BuildContext context) {
    if (message.runtimeType == ImageMessage) {
      return GestureDetector(
        onTap: () {
          Navigator.push(context, MaterialPageRoute(builder: (context) {
            return ViewImage(
              message: (message as ImageMessage)
            );
          }));
        },
        child: ConstrainedBox(
          constraints: const BoxConstraints(maxHeight: 350, maxWidth: 250),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(20),
            child: Image.file(
              (message as ImageMessage).file,
              fit: BoxFit.fill,
            ),
          ),
        ),
      );
    }

    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
        color: (
          message.senderUsername == profile.username ?
          Theme.of(context).colorScheme.primary :
          Theme.of(context).colorScheme.tertiary
        ),
      ),
      padding: const EdgeInsets.all(12),
      child: Text(
        message.getContent(),
        style: TextStyle(
          fontSize: 15,
          color: message.senderUsername == profile.username ?
            Theme.of(context).colorScheme.onPrimary :
            Theme.of(context).colorScheme.onTertiary,
        ),
      ),
    );
  }

  Widget usernameOrFailedToSend(int index) {
    if (message.senderUsername != profile.username) {
      return Text(
        message.senderUsername,
        style: TextStyle(
          fontSize: 12,
          color: Colors.grey[300],
        ),
      );
    }

    if (message.failedToSend) {
      return Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: const <Widget>[
          Icon(
            Icons.warning_rounded,
            color: Colors.red,
            size: 20,
          ),
          Text(
            'Failed to send',
            style: TextStyle(color: Colors.red, fontSize: 12),
            textAlign: TextAlign.right,
          ),
        ],
      );
    }

    return const SizedBox.shrink();
  }
}