import 'package:Envelope/components/custom_title_bar.dart';
import 'package:flutter/material.dart';

import '/models/conversations.dart';
import '/models/messages.dart';
import '/models/my_profile.dart';
import '/utils/storage/messages.dart';
import '/utils/time.dart';
import '/views/main/conversation/settings.dart';

class ConversationDetail extends StatefulWidget{
  final Conversation conversation;
  const ConversationDetail({
    Key? key,
    required this.conversation,
  }) : super(key: key);

  @override
  _ConversationDetailState createState() => _ConversationDetailState();

}

class _ConversationDetailState extends State<ConversationDetail> {
  String conversationName = '';
  List<Message> messages = [];
  MyProfile profile = MyProfile(id: '', username: '');

  TextEditingController msgController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CustomTitleBar(
        title: Text(
          conversationName,
          style: TextStyle(
            fontSize: 16,
            fontWeight: FontWeight.w600,
            color: Theme.of(context).appBarTheme.toolbarTextStyle?.color
          ),
        ),
        showBack: true,
        rightHandButton: IconButton(
                  onPressed: (){
                    Navigator.of(context).push(
                      MaterialPageRoute(builder: (context) => ConversationSettings(
                          conversation: widget.conversation
                      )),
                    );
                  },
                  icon: Icon(
                    Icons.settings,
                    color: Theme.of(context).appBarTheme.iconTheme?.color,
                  ),
                ),
      ),

      body: Stack(
        children: <Widget>[
          messagesView(),
          Align(
            alignment: Alignment.bottomLeft,
            child: ConstrainedBox(
              constraints: const BoxConstraints(
                maxHeight: 200.0,
              ),
              child: Container(
                padding: const EdgeInsets.only(left: 10,bottom: 10,top: 10),
                // height: 60,
                width: double.infinity,
                color: Theme.of(context).backgroundColor,
                child: Row(
                  children: <Widget>[
                    GestureDetector(
                      onTap: (){
                      },
                      child: Container(
                        height: 30,
                        width: 30,
                        decoration: BoxDecoration(
                          color: Theme.of(context).primaryColor,
                          borderRadius: BorderRadius.circular(30),
                        ),
                        child: Icon(
  Icons.add,
                          color: Theme.of(context).colorScheme.onPrimary,
                          size: 20
                        ),
                      ),
                    ),
                    const SizedBox(width: 15,),
                    Expanded(
                      child: TextField(
                        decoration: InputDecoration(
                          hintText: 'Write message...',
                          hintStyle: TextStyle(
                            color: Theme.of(context).hintColor,
                          ),
                          border: InputBorder.none,
                        ),
                        maxLines: null,
                        controller: msgController,
                      ),
                    ),
                    const SizedBox(width: 15),
                    Container(
                      width: 45,
                      height: 45,
                      child: FittedBox(
                        child: FloatingActionButton(
                          onPressed: () async {
                            if (msgController.text == '') {
                              return;
                            }
                            await sendMessage(widget.conversation, msgController.text);
                            messages = await getMessagesForThread(widget.conversation);
                            setState(() {});
                            msgController.text = '';
                          },
                          child: Icon(
                            Icons.send,
                            color: Theme.of(context).colorScheme.onPrimary,
                            size: 22
                          ),
                          backgroundColor: Theme.of(context).primaryColor,
                        ),
                      ),
                    ),
                    const SizedBox(width: 10),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Future<void> fetchMessages() async {
    conversationName = await widget.conversation.getName();
    profile = await MyProfile.getProfile();
    messages = await getMessagesForThread(widget.conversation);
    setState(() {});
  }

  @override
  void initState() {
    super.initState();
    fetchMessages();
  }

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

    if (messages[index].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();
  }

  Widget messagesView() {
    if (messages.isEmpty) {
      return const Center(
        child: Text('No Messages'),
      );
    }

    return ListView.builder(
      itemCount: messages.length,
      shrinkWrap: true,
      padding: const EdgeInsets.only(top: 10,bottom: 90),
      reverse: true,
      itemBuilder: (context, index) {
        return Container(
          padding: const EdgeInsets.only(left: 14,right: 14,top: 0,bottom: 0),
          child: Align(
            alignment: (
            messages[index].senderUsername == profile.username ?
            Alignment.topRight :
            Alignment.topLeft
          ),
            child: Column(
              crossAxisAlignment: messages[index].senderUsername == profile.username ?
              CrossAxisAlignment.end :
              CrossAxisAlignment.start,
              children: <Widget>[
                Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(20),
                    color: (
                    messages[index].senderUsername == profile.username ?
                    Theme.of(context).colorScheme.primary :
                    Theme.of(context).colorScheme.tertiary
                  ),
                  ),
                  padding: const EdgeInsets.all(12),
                  child: Text(
                    messages[index].data,
                    style: TextStyle(
                      fontSize: 15,
                      color: messages[index].senderUsername == profile.username ?
                      Theme.of(context).colorScheme.onPrimary :
                      Theme.of(context).colorScheme.onTertiary,
                    )
                  ),
                ),
                const SizedBox(height: 1.5),
                Row(
                  mainAxisAlignment: messages[index].senderUsername == profile.username ?
                  MainAxisAlignment.end :
                  MainAxisAlignment.start,
                  children: <Widget>[
                    const SizedBox(width: 10),
                    usernameOrFailedToSend(index),
                  ],
                ),
                const SizedBox(height: 1.5),
                Row(
                  mainAxisAlignment: messages[index].senderUsername == profile.username ?
                  MainAxisAlignment.end :
                  MainAxisAlignment.start,
                  children: <Widget>[
                    const SizedBox(width: 10),
                    Text(
                      convertToAgo(messages[index].createdAt),
                      textAlign: messages[index].senderUsername == profile.username ?
                      TextAlign.left :
                      TextAlign.right,
                      style: TextStyle(
                        fontSize: 12,
                        color: Colors.grey[500],
                      ),
                    ),
                  ],
                ),
                index != 0 ?
                const SizedBox(height: 20) :
                const SizedBox.shrink(),
              ],
            )
          ),
        );
      },
    );
  }
}