import 'package:flutter/material.dart';
import 'package:messaging_app/components/messaging_provider.dart';
import 'package:messaging_app/models/users.dart';
import 'package:messaging_app/pages/conversations_page.dart';
import 'package:messaging_app/service/navigation_service.dart';
import 'package:provider/provider.dart';
import 'package:timeago/timeago.dart' as timeago;

// ignore: must_be_immutable
class SearchPage extends StatefulWidget {
  SearchPage({
    super.key,
    required this.deviceHeight,
    required this.deviceWidth,
  });

  double deviceHeight;
  double deviceWidth;

  @override
  State<SearchPage> createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {
  late String _searchText;
  late List<User> _usersData;
  MessagingProviders _auth = MessagingProviders.instance;
  //
  @override
  void initState() {
    super.initState();
    _searchText = '';
    _usersData = [];
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: SizedBox(
        height: widget.deviceHeight,
        width: widget.deviceWidth,
        child: ChangeNotifierProvider.value(
          value: _auth,
          child: _searchPaheUI(),
        ),
      ),
    );
  }

  Widget _searchPaheUI() {
    return Builder(builder: (_context) {
      _auth = Provider.of<MessagingProviders>(_context);
      return Column(
        mainAxisAlignment: MainAxisAlignment.start,
        mainAxisSize: MainAxisSize.max,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          _searchPageUIField(),
          _searchPageUIList(),
        ],
      );
    });
  }

  Widget _searchPageUIField() {
    return Container(
      height: widget.deviceHeight * 0.08,
      width: widget.deviceWidth,
      padding: EdgeInsets.symmetric(
        vertical: widget.deviceHeight * 0.02,
      ),
      child: TextField(
        autocorrect: false,
        style: TextStyle(
          color: Colors.white,
        ),
        onChanged: (_input) {
          setState(() {
            _searchText = _input;
          });
        },
        decoration: InputDecoration(
          prefixIcon: Icon(Icons.search),
          labelText: "search",
          labelStyle: TextStyle(color: Colors.white),
          border: OutlineInputBorder(borderSide: BorderSide.none),
        ),
      ),
    );
  }

  Widget _searchPageUIList() {
    return StreamBuilder<List<User>>(
        stream: _auth.getAllUsers(_searchText.trim()),
        builder: (_, _snapshot) {
          if (_snapshot.hasData) {
            _usersData = _snapshot.data!
                .where((_data) => _data.id != _auth.user!.$id)
                .toList();
          }
          return _snapshot.hasData
              ? SizedBox(
                  height: widget.deviceHeight * 0.70,
                  child: ListView.builder(
                      itemCount: _usersData.length,
                      itemBuilder: (_, _index) {
                        var _userData = _usersData[_index];
                        var _isUserActive = _userData.lastSeen.isBefore(
                          DateTime.now().toUtc().subtract(
                                Duration(
                                  minutes: 1,
                                ),
                              ),
                        );
                        return ListTile(
                          enabled: true,
                          onTap: () async {
                            List _linkId = [
                              _auth.user!.$id.substring(0, 18),
                              _userData.id.substring(0, 18)
                            ];
                            _linkId.sort();

                            NavigationService.instance.navigateToRoute(
                              MaterialPageRoute(
                                builder: (BuildContext _context) {
                                  return ConversationsPage(
                                    chatId: _linkId.join(),
                                    userId: _userData.id,
                                    userName: _userData.name,
                                    userImage: _userData.image,
                                    userEmail: _userData.email,
                                  );
                                },
                              ),
                            );
                          },
                          title: Text(_userData.name),
                          leading: Container(
                            width: 50,
                            height: 50,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(100),
                              image: DecorationImage(
                                fit: BoxFit.cover,
                                image: NetworkImage(_userData.image),
                              ),
                            ),
                          ),
                          trailing: Column(
                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                            mainAxisSize: MainAxisSize.max,
                            crossAxisAlignment: CrossAxisAlignment.end,
                            children: [
                              _isUserActive
                                  ? Text(
                                      "last seen",
                                      style: TextStyle(
                                        fontSize: 15,
                                      ),
                                    )
                                  : Text(
                                      "active",
                                      style: TextStyle(
                                        fontSize: 15,
                                      ),
                                    ),
                              _isUserActive
                                  ? Text(
                                      timeago.format(
                                        _userData.lastSeen,
                                      ),
                                      style: TextStyle(fontSize: 15),
                                    )
                                  : Container(
                                      height: 10,
                                      width: 10,
                                      decoration: BoxDecoration(
                                        color: Colors.blue,
                                        borderRadius:
                                            BorderRadius.circular(100),
                                      ),
                                    )
                            ],
                          ),
                        );
                      }),
                )
              : Container();
          // : SpinKitWanderingCubes(
          //     color: Colors.blue,
          //     size: 50.0,
          //   );
        });
  }
}