import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
import 'package:messaging_app/components/messaging_provider.dart';
import 'package:messaging_app/models/conversations.dart';
import 'package:provider/provider.dart';
import 'package:timeago/timeago.dart' as timeago;

class RecentConverstationsPage extends StatelessWidget {
  //

  final double _deviceHeight;
  final double _deviceWidth;
  late MessagingProviders _auth;

  RecentConverstationsPage(this._deviceHeight, this._deviceWidth);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: _deviceHeight,
      width: _deviceWidth,
      child: ChangeNotifierProvider<MessagingProviders>.value(
        value: MessagingProviders.instance,
        child: _conversationView(),
      ),
    );
  }

  Widget _conversationView() {
    return Builder(builder: (_context) {
      _auth = Provider.of<MessagingProviders>(_context);
      return Container(
        height: _deviceHeight,
        width: _deviceWidth,
        child: StreamBuilder<List<Conversations>>(
            stream: MessagingProviders.instance
                .getUserConversation(_auth.user!.$id),
            builder: (_, _snapshot) {
              return _snapshot.hasData
                  ? ListView.builder(
                      itemCount: _snapshot.data!.length,
                      itemBuilder: (_context, _index) {
                        var _details = _snapshot.data![_index].details;
                        return ListTile(
                          onTap: () {
                            //
                          },
                          title: Text(_details.name),
                          subtitle: Text(_details.lastMessage),
                          leading: Container(
                            width: 50,
                            height: 50,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(100),
                              image: DecorationImage(
                                fit: BoxFit.cover,
                                image: NetworkImage(_details.image),
                              ),
                            ),
                          ),
                          trailing: _listTrailingWidget(_details.timeStamp),
                        );
                      },
                    )
                  : SpinKitWanderingCubes(
                      color: Colors.blue,
                      size: 50.0,
                    );
            }),
      );
    });
  }

  Widget _listTrailingWidget(DateTime? _date) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      mainAxisSize: MainAxisSize.max,
      crossAxisAlignment: CrossAxisAlignment.end,
      children: [
        Text(
          timeago.format(_date!),
          style: TextStyle(fontSize: 15),
        ),
        Container(
          height: 12,
          width: 12,
          decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.circular(100),
          ),
        )
      ],
    );
  }
}