import 'package:flutter/material.dart';

import '/models/messages.dart';
import '/components/custom_circle_avatar.dart';
import '/models/conversations.dart';
import '/views/main/conversation/detail.dart';
import '/utils/time.dart';

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

  @override
  _ConversationListItemState createState() => _ConversationListItemState();
}

class _ConversationListItemState extends State<ConversationListItem> {
  late Conversation conversation;
  late Message? recentMessage;
  bool loaded = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        behavior: HitTestBehavior.opaque,
        onTap: () {
          loaded ? Navigator.push(context, MaterialPageRoute(builder: (context){
            return ConversationDetail(
                conversation: conversation,
            );
          })).then(onGoBack) : null;
        },
        child: Container(
                   padding: const EdgeInsets.only(left: 16,right: 0,top: 10,bottom: 10),
                   child: !loaded ? null : Row(
                       children: <Widget>[
                         Expanded(
                             child: Row(
                                 children: <Widget>[
                                   CustomCircleAvatar(
                                       initials: conversation.name[0].toUpperCase(),
                                       imagePath: null,
                                   ),
                                   const SizedBox(width: 16),
                                   Expanded(
                                       child: Align(
                                           alignment: Alignment.centerLeft,
                                           child: Container(
                                               color: Colors.transparent,
                                               child: Column(
                                                   crossAxisAlignment: CrossAxisAlignment.start,
                                                   children: <Widget>[
                                                     Text(
                                                         conversation.name,
                                                         style: const TextStyle(fontSize: 16)
                                                     ),
                                                     recentMessage != null ?
                                                       const SizedBox(height: 2) :
                                                       const SizedBox.shrink()
                                                     ,
                                                     recentMessage != null ?
                                                       Text(
                                                         recentMessage!.data,
                                                         overflow: TextOverflow.ellipsis,
                                                         maxLines: 1,
                                                         style: TextStyle(
                                                           fontSize: 13,
                                                           color: Colors.grey.shade600,
                                                           fontWeight: conversation.isRead ? FontWeight.normal : FontWeight.bold,
                                                        ),
                                                      ) :
                                                     const SizedBox.shrink(),
                                                  ],
                                               ),
                                           ),
                                       ),
                                   ),
                                   recentMessage != null ?
                                       Padding(
                                         padding: const EdgeInsets.only(left: 10),
                                         child: Text(
                                           convertToAgo(recentMessage!.createdAt, short: true),
                                           style: TextStyle(
                                             fontSize: 13,
                                             color: Colors.grey.shade600,
                                           ),
                                         )
                                       ):
                                       const SizedBox.shrink(),
                                ],
                              ),
                          ),
                      ],
                  ),
              ),
        );
  }

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

  Future<void> getConversationData() async {
    conversation = widget.conversation;
    recentMessage = await conversation.getRecentMessage();
    loaded = true;
    setState(() {});
  }

  onGoBack(dynamic value) async {
    conversation = await getConversationById(widget.conversation.id);
    setState(() {});
  }
}