import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
import '/models/conversations.dart';
import '/models/messages.dart';

String convertToAgo(String input){
  DateTime time = DateTime.parse(input);
  Duration diff = DateTime.now().difference(time);

  if(diff.inDays >= 1){
    return '${diff.inDays} day${diff.inDays == 1 ? "" : "s"} ago';
  }
  if(diff.inHours >= 1){
    return '${diff.inHours} hour${diff.inHours == 1 ? "" : "s"} ago';
  }
  if(diff.inMinutes >= 1){
    return '${diff.inMinutes} minute${diff.inMinutes == 1 ? "" : "s"} ago';
  }
  if (diff.inSeconds >= 1){
    return '${diff.inSeconds} second${diff.inSeconds == 1 ? "" : "s"} ago';
  }
  return 'just now';
}

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> {
  List<Message> messages = [];
  String userId = '';

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

  void fetchMessages() async {
    final preferences = await SharedPreferences.getInstance();
    userId = preferences.getString('userId')!;
    messages = await getMessagesForThread(widget.conversation.messageThreadKey);
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            elevation: 0,
            automaticallyImplyLeading: false,
            backgroundColor: Colors.white,
            flexibleSpace: SafeArea(
                child: Container(
                    padding: const EdgeInsets.only(right: 16),
                    child: Row(
                        children: <Widget>[
                          IconButton(
                              onPressed: (){
                                Navigator.pop(context);
                              },
                              icon: const Icon(Icons.arrow_back,color: Colors.black,),
                          ),
                          const SizedBox(width: 2,),
                          Expanded(
                              child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: <Widget>[
                                    Text(
                                        widget.conversation.name,
                                        style: const TextStyle(
                                            fontSize: 16,
                                            fontWeight: FontWeight.w600),
                                    ),
                                  ],
                              ),
                          ),
                          const Icon(Icons.settings,color: Colors.black54,),
                        ],
                      ),
                    ),
                  ),
                ),
                body: Stack(
                    children: <Widget>[
                      ListView.builder(
                          itemCount: messages.length,
                          shrinkWrap: true,
                          padding: const EdgeInsets.only(top: 10,bottom: 10),
                          reverse: true,
                          itemBuilder: (context, index) {
                            return Container(
                                padding: const EdgeInsets.only(left: 14,right: 14,top: 0,bottom: 0),
                                child: Align(
                                    alignment: (
                                        messages[index].senderId == userId ?
                                        Alignment.topLeft:
                                        Alignment.topRight
                                    ),
                                    child: Column(
                                        crossAxisAlignment: messages[index].senderId == userId ?
                                          CrossAxisAlignment.start :
                                          CrossAxisAlignment.end,
                                        children: <Widget>[
                                          Container(
                                            decoration: BoxDecoration(
                                                borderRadius: BorderRadius.circular(20),
                                                color: (
                                                    messages[index].senderId == userId ?
                                                    Colors.grey.shade200 :
                                                    Colors.blue[200]
                                                ),
                                            ),
                                            padding: const EdgeInsets.all(12),
                                            child: Text(messages[index].data, style: const TextStyle(fontSize: 15)),
                                          ),
                                          messages[index].senderId != userId ?
                                            Text(messages[index].senderUsername) :
                                            const SizedBox.shrink(),
                                          Text(
                                            convertToAgo(messages[index].createdAt),
                                            textAlign: TextAlign.left,
                                            style: TextStyle(
                                                fontSize: 12,
                                                color: Colors.grey[500],
                                          ),
                                        ),
                                      ]
                                    )
                                ),
                            );
                          },
                          ),
                          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: Colors.white,
                                      child: Row(
                                          children: <Widget>[
                                            GestureDetector(
                                                onTap: (){
                                                },
                                                child: Container(
                                                           height: 30,
                                                           width: 30,
                                                           decoration: BoxDecoration(
                                                               color: Colors.lightBlue,
                                                               borderRadius: BorderRadius.circular(30),
                                                           ),
                                                           child: const Icon(Icons.add, color: Colors.white, size: 20, ),
                                                       ),
                                            ),
                                            const SizedBox(width: 15,),
                                            const Expanded(
                                                child: TextField(
                                                    decoration: InputDecoration(
                                                        hintText: "Write message...",
                                                        hintStyle: TextStyle(color: Colors.black54),
                                                        border: InputBorder.none,
                                                    ),
                                                    maxLines: null,
                                                ),
                                            ),
                                            const SizedBox(width: 15,),
                                            FloatingActionButton(
                                                onPressed: () {
                                                },
                                                child: const Icon(Icons.send,color: Colors.white,size: 18,),
                                                backgroundColor: Colors.blue,
                                                elevation: 0,
                                            ),
                                        ],
                                    ),
                                ),
                            ),
                      ),
                  ],
            ),
      );
  }
}