import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';

import 'package:page_transition/page_transition.dart';
import 'package:provider/provider.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:teso/Classes/API%20Clasess/CommentsPost.dart';
import 'package:teso/Classes/Firebase/Posts.dart';
import 'package:teso/Pages/PageWidgets/ChatScreen/bottomBar.dart';
import 'package:teso/Pages/Sub_Pages/Posts/UserPosts.dart';
import 'package:teso/providers/user_provider.dart';
import 'package:teso/util/consts.dart';
import 'package:intl/intl.dart';
import 'package:time_elapsed/time_elapsed.dart';

// ignore: must_be_immutable
class CommentSection extends StatefulWidget {
  FBPosts postedAd;
  CommentSection({
    Key key,
    @required this.postedAd,
  })  : assert(postedAd != null),
        super(key: key);
  @override
  _CommentSectionState createState() => _CommentSectionState();
}

class _CommentSectionState extends State<CommentSection> {
  TextEditingController controller = new TextEditingController();
  final ScrollController listScrollController = ScrollController();
  List<QueryDocumentSnapshot> listMessage = new List.from([]);
  int _limit = 20;
  final int _limitIncrement = 20;

  _scrollListener() {
    if (listScrollController.offset >=
            listScrollController.position.maxScrollExtent &&
        !listScrollController.position.outOfRange) {
      print("reach the bottom");
      setState(() {
        print("reach the bottom");
        _limit += _limitIncrement;
      });
    }
    if (listScrollController.offset <=
            listScrollController.position.minScrollExtent &&
        !listScrollController.position.outOfRange) {
      print("reach the top");
      setState(() {
        print("reach the top");
      });
    }
  }

  @override
  void initState() {
    super.initState();
    listScrollController.addListener(_scrollListener);
  }

  @override
  void dispose() {
    controller.dispose();
    listScrollController.dispose();
    super.dispose();
  }

  void sendComment(String text, int position) async {
    if (controller.text.isNotEmpty) {
      CommentsPost comment = new CommentsPost();
      SharedPreferences.getInstance().then((value) async {
        comment.postId = widget.postedAd.postID;
        comment.comment = text;
        comment.timestamp = DateTime.now().toIso8601String();
        comment.commenterId = value.getString("id");
        comment.commentId =
            "TESCPCM" + DateTime.now().toString() + value.getString("id");
      });
      // setState(() {
      //   widget.postedAd.comments.add(comment);
      // });

      Provider.of<UserProvider>(context, listen: false).commentPost(comment);
      controller.clear();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Comments"),
        leading: IconButton(
          icon: Icon(
            Icons.arrow_back_ios,
          ),
          onPressed: () => Navigator.pushReplacement(
            context,
            PageTransition(
              child: UserPosts(
                postedAd: widget.postedAd,
              ),
              type: PageTransitionType.rightToLeft,
            ),
          ),
        ),
      ),
      body: Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        child: Stack(
          children: [
            Container(
              height: MediaQuery.of(context).size.height,
              width: MediaQuery.of(context).size.width,
              margin: EdgeInsets.only(bottom: 60),
              child: StreamBuilder(
                stream: FirebaseFirestore.instance
                    .collection('posts')
                    .doc('comments')
                    .collection(widget.postedAd.postID)
                    .orderBy('timestamp')
                    .limit(_limit)
                    .snapshots(),
                builder: (context, snapshot) {
                  if (snapshot.data == null &&
                      snapshot.connectionState == ConnectionState.waiting) {
                    return Center(
                        child: CircularProgressIndicator(
                            valueColor: AlwaysStoppedAnimation<Color>(
                                Theme.of(context).primaryColor)));
                  } else if (snapshot.data.docs.length == 0) {
                    // if (widget.postedAd.title != null) {
                    //   return Align(
                    //     alignment: Alignment.topCenter,
                    //     child: buildPostTile(context, widget.postedAd),
                    //   );
                    // } else {
                    return Container();
                    // }
                  } else {
                    listMessage = snapshot.data.docs;
                    return ListView.builder(
                      padding: EdgeInsets.all(10.0),
                      itemCount: listMessage.length,
                      itemBuilder: (context, index) {
                        int timeInMillis = int.parse(snapshot.data.docs[index]
                            .data()['timestamp']
                            .toString());
                        var date =
                            DateTime.fromMillisecondsSinceEpoch(timeInMillis);
                        var formattedDate =
                            DateFormat("yyyy-MM-dd HH:mm:ss").format(date);
                        if (index == 0 && widget.postedAd.title != null) {
                          return Column(children: [
                            // buildPostTile(context, widget.postedAd),
                            Divider(),
                            ListTile(
                              leading: Container(
                                width: 40,
                                height: 40,
                                decoration: BoxDecoration(
                                    shape: BoxShape.circle,
                                    border: Border.all(
                                      color: Colors.black,
                                      width: 1,
                                    )),
                                child: ClipRRect(
                                  borderRadius: BorderRadius.only(
                                    topLeft: Radius.circular(90.0),
                                    topRight: Radius.circular(90.0),
                                    bottomLeft: Radius.circular(90),
                                    bottomRight: Radius.circular(90),
                                  ),
                                  child: FadeInImage(
                                    height: 90,
                                    width: 90,
                                    fit: BoxFit.fill,
                                    image: NetworkImage(serverLocation +
                                        "api/pulldp/" +
                                        snapshot.data.docs[index]
                                            .data()['commenterID']),
                                    placeholder: AssetImage(
                                        "assets/images/tesoDP/dp1.png"),
                                  ),
                                ),
                              ),
                              title: new RichText(
                                text: new TextSpan(
                                  style: new TextStyle(
                                    fontSize: 14.0,
                                    color: Theme.of(context).primaryColorLight,
                                  ),
                                  children: <TextSpan>[
                                    new TextSpan(
                                        text: snapshot.data.docs[index]
                                                .data()['commenter'] +
                                            "  ",
                                        style: new TextStyle(
                                            fontWeight: FontWeight.bold)),
                                    new TextSpan(
                                        text: snapshot.data.docs[index]
                                            .data()['comment']),
                                  ],
                                ),
                              ),
                              subtitle: Text(
                                TimeElapsed.fromDateTime(
                                    DateTime.parse(formattedDate)),
                              ),
                            ),
                          ]);
                        }
                        return ListTile(
                          leading: Container(
                            width: 40,
                            height: 40,
                            decoration: BoxDecoration(
                                shape: BoxShape.circle,
                                border: Border.all(
                                  color: Colors.black,
                                  width: 1,
                                )),
                            child: ClipRRect(
                              borderRadius: BorderRadius.only(
                                topLeft: Radius.circular(90.0),
                                topRight: Radius.circular(90.0),
                                bottomLeft: Radius.circular(90),
                                bottomRight: Radius.circular(90),
                              ),
                              child: FadeInImage(
                                height: 90,
                                width: 90,
                                fit: BoxFit.fill,
                                image: NetworkImage(serverLocation +
                                    "api/pulldp/" +
                                    snapshot.data.docs[index]
                                        .data()['commenterID']),
                                placeholder:
                                    AssetImage("assets/images/tesoDP/dp1.png"),
                              ),
                            ),
                          ),
                          title: new RichText(
                            text: new TextSpan(
                              style: new TextStyle(
                                fontSize: 14.0,
                                color: Theme.of(context).primaryColorLight,
                              ),
                              children: <TextSpan>[
                                new TextSpan(
                                    text: snapshot.data.docs[index]
                                            .data()['commenter'] +
                                        "  ",
                                    style: new TextStyle(
                                        fontWeight: FontWeight.bold)),
                                new TextSpan(
                                    text: snapshot.data.docs[index]
                                        .data()['comment']),
                              ],
                            ),
                          ),
                          subtitle: Text(
                            TimeElapsed.fromDateTime(
                                DateTime.parse(formattedDate)),
                          ),
                        );
                      },
                      // reverse: true,
                      controller: listScrollController,
                    );
                  }
                },
              ),
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: buildBottom(
                context,
                controller,
                sendComment,
              ),
            ),
          ],
        ),
      ),
    );
  }
}