import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:one_poem/timeline/models/friend_entity.dart';

import 'package:one_poem/extension/int_extension.dart';

class FriendCell extends StatefulWidget {
  final FriendData model;

  const FriendCell({Key? key, required this.model}) : super(key: key);
  @override
  State<StatefulWidget> createState() {
    return FriendCellState();
  }
}

class FriendCellState extends State<FriendCell> {
  Widget? makePictureCount(List<String> pics) {
    if (pics.length == 1) {
      return Container(
        margin: EdgeInsets.fromLTRB(0.px, 10.px, 50.px, 10.px),
        child: Image.asset(
          "assets/data/friends/" + pics[0],
          fit: BoxFit.fill,
        ),
      );
    } else if (pics.length == 4 || pics.length == 2) {
      return Container(
          margin: EdgeInsets.fromLTRB(0.px, 10.px, 0.px, 10.px),
          child: Wrap(
              spacing: 5,
              runSpacing: 5,
              alignment: WrapAlignment.start,
              children: pics
                  .map((p) => Image.asset(
                        "assets/data/friends/" + p,
                        width: 100.px,
                        height: 100.px,
                        fit: BoxFit.cover,
                      ))
                  .toList()));
    } else if (pics.length == 3 || pics.length > 4) {
      return Container(
          margin: EdgeInsets.fromLTRB(0.px, 10.px, 0.px, 10.px),
          child: Wrap(
            spacing: 5,
            runSpacing: 5,
            alignment: WrapAlignment.start,
            children: pics
                .map((p) => Image.asset(
                      "assets/data/friends/" + p,
                      width: 70.px,
                      height: 70.px,
                      fit: BoxFit.cover,
                    ))
                .toList(),
          ));
    }
  }

  double _width = 0;
  bool _isShow = false;

  @override
  Widget build(BuildContext context) {
    return Container(
        color: const Color(0XFFFEFFFE),
        child: Column(
          children: <Widget>[
            Flex(
              direction: Axis.horizontal,
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Container(
                  width: 40.px,
                  height: 40.px,
                  margin: EdgeInsets.fromLTRB(15.px, 20.px, 15.px, 0.px),
                  child: ClipRRect(
                    child: Image.asset(
                      "assets/data/friends/" + widget.model.head,
                      fit: BoxFit.fill,
                    ),
                    borderRadius: BorderRadius.circular(5.px),
                  ),
                ),
                Expanded(
                    child: Container(
                        margin: EdgeInsets.fromLTRB(0.px, 20.px, 70.px, 0.px),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              widget.model.name,
                              style: TextStyle(
                                  fontSize: 17.px,
                                  color: const Color(0XFF566B94),
                                  fontWeight: FontWeight.w500),
                            ),
                            SizedBox(
                              height: 5.px,
                            ),
                            Text(
                              widget.model.desc,
                              style: TextStyle(fontSize: 15.px),
                            ),
                            makePictureCount(widget.model.pics)!,
                          ],
                        )))
              ],
            ),
            Flex(
              direction: Axis.horizontal,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Expanded(
                  flex: 1,
                  child: Container(
                    margin: EdgeInsets.only(left: 70.px),
                    child: Text(
                      widget.model.time,
                      style: TextStyle(
                        fontSize: 12.px,
                        color: const Color(0XFFB2B2B2),
                      ),
                    ),
                  ),
                ),
                Expanded(
                    flex: 2,
                    child: Container(
                      margin: EdgeInsets.only(right: 20.px),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: <Widget>[
                          AnimatedContainer(
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(5.px),
                                  color: const Color(0XFF4C5154)),
                              duration: const Duration(milliseconds: 100),
                              width: _width,
                              height: 30.px,
                              child: Flex(
                                direction: Axis.horizontal,
                                children: <Widget>[
                                  Expanded(
                                      flex: 1,
                                      child: Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.center,
                                        children: <Widget>[
                                          Icon(
                                            Icons.favorite_border,
                                            color: Colors.white,
                                            size: 15.px,
                                          ),
                                          SizedBox(
                                            width: 5.px,
                                          ),
                                          InkWell(
                                              onTap: () {
                                                setState(() {
                                                  _starCount++;
                                                  isShow();
                                                });
                                              },
                                              child: Text(
                                                "荐",
                                                style: TextStyle(
                                                  color: Colors.white,
                                                  fontSize: 12.px,
                                                ),
                                              ))
                                        ],
                                      )),
                                  Expanded(
                                      flex: 1,
                                      child: Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.center,
                                        children: <Widget>[
                                          Icon(
                                            Icons.sms,
                                            color: Colors.white,
                                            size: 15.px,
                                          ),
                                          SizedBox(
                                            width: 5.px,
                                          ),
                                          InkWell(
                                              onTap: () {
                                                setState(() {
                                                  _talkCount++;
                                                  isShow();
                                                });
                                              },
                                              child: Text(
                                                "避",
                                                style: TextStyle(
                                                  color: Colors.white,
                                                  fontSize: 12.px,
                                                ),
                                              ))
                                        ],
                                      )),
                                  Expanded(
                                      flex: 1,
                                      child: Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.center,
                                        children: <Widget>[
                                          Icon(
                                            Icons.sms,
                                            color: Colors.white,
                                            size: 15.px,
                                          ),
                                          SizedBox(
                                            width: 5.px,
                                          ),
                                          InkWell(
                                              onTap: () {
                                                setState(() {
                                                  _talkCount++;
                                                  isShow();
                                                });
                                              },
                                              child: Text(
                                                "藏",
                                                style: TextStyle(
                                                  color: Colors.white,
                                                  fontSize: 12.px,
                                                ),
                                              ))
                                        ],
                                      )),
                                  Expanded(
                                      flex: 1,
                                      child: Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.center,
                                        children: <Widget>[
                                          Icon(
                                            Icons.sms,
                                            color: Colors.white,
                                            size: 15.px,
                                          ),
                                          SizedBox(
                                            width: 5.px,
                                          ),
                                          InkWell(
                                              onTap: () {
                                                setState(() {
                                                  _talkCount++;
                                                  isShow();
                                                });
                                              },
                                              child: Text(
                                                "评",
                                                style: TextStyle(
                                                  color: Colors.white,
                                                  fontSize: 12.px,
                                                ),
                                              ))
                                        ],
                                      )),
                                ],
                              )),
                          SizedBox(
                            width: 10.px,
                          ),
                          InkWell(
                              onTap: () {
                                isShow();
                              },
                              child: Image.asset(
                                "assets/data/friends/button.png",
                                width: 22.px,
                                height: 18.px,
                              )),
                        ],
                      ),
                    ))
              ],
            ),
            Offstage(
              offstage: _starCount == 0 ? true : false,
              child: Container(
                constraints: const BoxConstraints(minWidth: double.infinity),
                margin: EdgeInsets.fromLTRB(70.px, 10.px, 15.px, 0.px),
                padding: EdgeInsets.all(5.px),
                color: const Color(0XFFF3F3F5),
                child: Wrap(
                    alignment: WrapAlignment.start,
                    runSpacing: 5.px,
                    spacing: 5.px,
                    children: likeView(_starCount)),
              ),
            ),
            Offstage(
              offstage: _talkCount == 0 ? true : false,
              child: Container(
                constraints: const BoxConstraints(minWidth: double.infinity),
                margin: EdgeInsets.fromLTRB(70.px, 0.px, 15.px, 0.px),
                padding: EdgeInsets.all(5.px),
                color: const Color(0XFFF3F3F5),
                child: Wrap(
                    alignment: WrapAlignment.start,
                    runSpacing: 5.px,
                    spacing: 5.px,
                    children: talkView(_talkCount)),
              ),
            ),
            SizedBox(
              height: 10.px,
            ),
            Container(
              height: 0.5,
              width: double.infinity,
              color: Colors.black26,
            )
          ],
        ));
  }

  void isShow() {
    _isShow = !_isShow;
    setState(() {
      _width = _isShow ? 160.px : 0.px;
    });
  }

  var _starCount = 0;
  var _talkCount = 0;

  List<Widget> likeView(int count) {
    List<Widget> result = [];
    for (int i = 0; i < count; i++) {
      result.add(SizedBox(
        width: 70.px,
        child: Row(
          children: <Widget>[
            Icon(
              Icons.favorite_border,
              size: 13.px,
              color: const Color(0XFF566B94),
            ),
            SizedBox(
              width: 5.px,
            ),
            Text(
              "sunnytu",
              style: TextStyle(
                  color: const Color(0XFF566B94),
                  fontSize: 15.px,
                  fontWeight: FontWeight.w500),
            )
          ],
        ),
      ));
    }

    return result;
  }

  List<Widget> talkView(int count) {
    List<Widget> result = [];
    for (int i = 0; i < count; i++) {
      result.add(Row(
        children: <Widget>[
          Expanded(
              child: Text.rich(
            TextSpan(children: [
              TextSpan(
                  text: "sunnytu：",
                  style: TextStyle(
                      fontSize: 15.px,
                      fontWeight: FontWeight.w500,
                      color: const Color(0XFF566B94))),
              TextSpan(
                text: "66666",
                style: TextStyle(fontSize: 14.px),
              )
            ]),
            textAlign: TextAlign.start,
          )),
        ],
      ));
    }

    return result;
  }
}