import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_easyrefresh/easy_refresh.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:ysairplane/code/YSAddSquare.dart';
import 'package:ysairplane/code/YSMineSquare.dart';
import 'package:ysairplane/code/YSSquareArticle.dart';
import 'package:ysairplane/code/YSSquareVideo.dart';
import 'package:ysairplane/tools/YSNetWorking.dart';
import 'package:ysairplane/tools/YSTools.dart';
import 'package:shared_preferences/shared_preferences.dart';

import 'YSAuthorSquare.dart';

class YSSquare extends StatefulWidget {
  @override
  _YSSquareState createState() => _YSSquareState();
}

class _YSSquareState extends State<YSSquare> with AutomaticKeepAliveClientMixin{
  ScrollController _scrollController = ScrollController();
  List _titles = [];
  List _dataArray = [];
  int _selected = 0;
  int _page = 1;
  String _name='';
  String _avatar;
  @override
  bool get wantKeepAlive => true;
  @override
  void initState() {
    Future.delayed(Duration(seconds: 0)).then((value){
      _getSquareTitleData();
    });
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return CupertinoPageScaffold(
      child: Stack(
        children: [
          SingleChildScrollView(
            child: Column(
              children: [
                Container(
                  height: MediaQuery.of(context).padding.top+55,
                  padding: EdgeInsets.only(left: 15,right: 15,top: MediaQuery.of(context).padding.top+5),
                  color: Colors.white,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      GestureDetector(
                        onTap: (){
                          Navigator.of(context,rootNavigator: true).push(
                            CupertinoPageRoute(
                              builder: (context){
                                return YSMineSquare();
                              }
                            )
                          );
                        },
                        child: Container(
                          width: (MediaQuery.of(context).size.width-30)/3,
                          child: Row(
                            children: [
                              Container(
                                height: 30,
                                width: 30,
                                margin: EdgeInsets.only(right: 5),
                                decoration: BoxDecoration(
                                    color: Colors.black12,
                                    borderRadius: BorderRadius.all(Radius.circular(15))
                                ),
                              ),
                              Container(
                                width: 70,
                                child: Text(_name,style: TextStyle(fontSize: 15,color: Color(0xFF333333),decoration: TextDecoration.none,),overflow: TextOverflow.ellipsis,),
                              )
                            ],
                          ),
                        ),
                      ),
                      Container(width: (MediaQuery.of(context).size.width-30)/3,child: Text('广场',style: TextStyle(fontSize: 20,color: Color(0xFF333333),decoration: TextDecoration.none),),alignment: Alignment.center,),
                      Container(width: (MediaQuery.of(context).size.width-30)/3,child: Icon(Icons.search,size: 25,color: Color(0xFF333333),),alignment: Alignment.centerRight,)
                    ],
                  ),
                ),
                Divider(height: 0.5,color: Color(0xFFEEEEEE),),
                Container(
                  height: 50,
                  color: Colors.white,
                  padding: EdgeInsets.only(left: 15,right: 15,top: 20),
                  child: ListView.separated(
                      scrollDirection: Axis.horizontal,
                      itemBuilder: (context,index){
                        return GestureDetector(
                          onTap: (){
                            setState(() {
                              _selected = index;
                            });
                            _refreshData();
                          },
                          child: Container(
                            height: 30,
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text('${_titles[index]['name']}',style: TextStyle(fontSize: 16,color: index==_selected?Color(0xFF007AFF):Color(0xFF333333),decoration: TextDecoration.none,fontWeight: index==_selected?FontWeight.bold:FontWeight.normal),),
                                Container(height: 2,width: 30,color: index==_selected?Color(0xFF007AFF):Colors.transparent,)
                              ],
                            ),
                          ),
                        );
                      },
                      separatorBuilder: (context,index){
                        return Container(width: 20,);
                      },
                      itemCount: _titles.length
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(left: 10,right: 10),
                  height: MediaQuery.of(context).size.height-MediaQuery.of(context).padding.top-155,
                  child: EasyRefresh(
                    onRefresh: _refreshData,
                    onLoad: _loadMore,
                    header: TaurusHeader(

                    ),
                    footer: TaurusFooter(

                    ),
                    child: StaggeredGridView.countBuilder(
                      controller: _scrollController,
                      crossAxisCount: 4,
                      crossAxisSpacing: 8,
                      mainAxisSpacing: 8,
                      itemCount: _dataArray.length,
                      itemBuilder: (context, index) {
                        return GestureDetector(
                          onTap: (){
                            Navigator.of(context,rootNavigator: true).push(
                              CupertinoPageRoute(
                                builder: (context){
                                  return _dataArray[index]['type']==1?YSSquareArticle(squareId: _dataArray[index]['id'],typeId: _dataArray[index]['type'],)
                                      :YSSquareVideo(squareId: _dataArray[index]['id'],typeId: _dataArray[index]['type'],);
                                }
                              )
                            );
                          },
                          child: Stack(
                            children: [
                              Container(
                                color: Colors.white,
                                child:Column(
                                  children: [
                                    AspectRatio(
                                      child: Container(
                                        decoration: BoxDecoration(
                                          borderRadius: BorderRadius.only(topLeft: Radius.circular(5),topRight: Radius.circular(5)),
                                        ),
                                        child: ClipRRect(
                                          borderRadius: BorderRadius.only(topLeft: Radius.circular(5),topRight: Radius.circular(5)),
                                          child: CachedNetworkImage(
                                            imageUrl: _dataArray[index]['type']==0?'${_dataArray[index]['coverPath']}':'${_dataArray[index]['topicCover']}',
                                            fit: BoxFit.fill
                                          ),
                                        ),
                                      ),
                                      aspectRatio: double.parse('${_dataArray[index]['coverWidth']}')/double.parse('${_dataArray[index]['coverHeight']}')
                                    ),
                                    Container(
                                      child: Text(_dataArray[index]['type']==0?'${_dataArray[index]['videoTitle']}':'${_dataArray[index]['topicTitle']}',
                                        style: TextStyle(fontSize: 13,color: Color(0xFF333333),decoration: TextDecoration.none,),maxLines: 2,overflow: TextOverflow.ellipsis,),
                                      padding: EdgeInsets.all(5),
                                      alignment: Alignment.centerLeft,
                                    ),
                                    Container(
                                      child: Row(
                                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                        children: [
                                          GestureDetector(
                                            behavior: HitTestBehavior.opaque,
                                            child: Row(
                                              children: [
                                                Container(
                                                  height: 20,
                                                  width: 20,
                                                  margin: EdgeInsets.only(right: 5),
                                                  decoration: BoxDecoration(
                                                    color: Colors.black12,
                                                    borderRadius: BorderRadius.all(Radius.circular(10)),
                                                  ),
                                                  child: ClipRRect(
                                                    borderRadius: BorderRadius.all(Radius.circular(10)),
                                                    child: CachedNetworkImage(
                                                      imageUrl: '${_dataArray[index]['user']['avatar']}',
                                                      fit: BoxFit.fill,
                                                    ),
                                                  ),
                                                ),
                                                Container(
                                                  width: 70,
                                                  child: Text('${_dataArray[index]['user']['nickname']}',
                                                    style: TextStyle(fontSize: 12,color: Color(0xFF333333),decoration: TextDecoration.none,),overflow: TextOverflow.ellipsis,),
                                                )
                                              ],
                                            ),
                                            onTap: (){
                                              Navigator.of(context,rootNavigator: true).push(
                                                CupertinoPageRoute(
                                                  builder: (context){
                                                    return YSAuthorSquare(authorId: int.parse('${_dataArray[index]['user']['id']}'),);
                                                  }
                                                )
                                              );
                                            },
                                          ),
                                          GestureDetector(
                                            behavior: HitTestBehavior.opaque,
                                            child: Row(
                                              children: [
                                                Container(
                                                    height: 15,
                                                    width: 15,
                                                    margin: EdgeInsets.only(right: 5),
                                                    child: Image.asset(_dataArray[index]['likeStatus']==0?'lib/images/love.png':'lib/images/love2.png')
                                                ),
                                                Container(
                                                  child: Text('${_dataArray[index]['likeCounts']}',style: TextStyle(fontSize: 12,color: Color(0xFFEE564C),decoration: TextDecoration.none,fontWeight: FontWeight.normal),overflow: TextOverflow.ellipsis,),
                                                )
                                              ],
                                              mainAxisSize: MainAxisSize.min,
                                            ),
                                            onTap: (){
                                              _postAgreementData(index);
                                            },
                                          ),
                                        ],
                                      ),
                                      padding: EdgeInsets.only(left: 5,right: 5,top: 3,bottom: 5),
                                    ),
                                  ],
                                ),
                              ),
                              Container(
                                height: 15,
                                margin: EdgeInsets.only(top: 10,left: 10),
                                decoration: BoxDecoration(
                                  color: Colors.black12,
                                  borderRadius: BorderRadius.all(Radius.circular(7.5)),
                                ),
                                child: Row(
                                  mainAxisSize: MainAxisSize.min,
                                  children: [
                                    Container(
                                        height: 10,
                                        width: 15,
                                        margin: EdgeInsets.only(right: 3),
                                        child: Image.asset('lib/images/eyes2.png')
                                    ),
                                    Container(
                                      child: Text('${_dataArray[index]['likeCounts']}',style: TextStyle(fontSize: 12,color: Colors.white,decoration: TextDecoration.none,fontWeight: FontWeight.normal),overflow: TextOverflow.ellipsis,),
                                    )
                                  ],
                                ),
                                padding: EdgeInsets.only(left: 8,right: 8),
                              ),
                              _dataArray[index]['type']==0?Container(
                                margin: EdgeInsets.only(left: (MediaQuery.of(context).size.width-25)/2-30,
                                    top: (MediaQuery.of(context).size.width-25)/2/(double.parse('${_dataArray[index]['coverWidth']}')/double.parse('${_dataArray[index]['coverHeight']}'))-30),
                                height: 20,
                                width: 20,
                                child: Icon(Icons.play_circle_filled,color: Colors.white,),
                              ):Container()
                            ],
                          ),
                        );
                      },
                      staggeredTileBuilder: (index) =>StaggeredTile.fit(2),
                      padding: EdgeInsets.only(top: 10),
                    ),
                  ),
                )
              ],
            ),
            padding: EdgeInsets.all(0),
            physics: NeverScrollableScrollPhysics(),
          ),
          GestureDetector(
            child: Container(
              margin: EdgeInsets.only(top: MediaQuery.of(context).size.height-110,left: MediaQuery.of(context).size.width-60),
              height: 50,
              width: 50,
              child: Image.asset('lib/images/addSquare.png'),
            ),
            onTap: (){
              showModalBottomSheet(
                backgroundColor: Colors.transparent,
                useRootNavigator: true,
                context: context,
                builder: (context){
                  return Container(
                    height: 200,
                    decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.only(topLeft: Radius.circular(10),topRight: Radius.circular(10))
                    ),
                    child: Column(
                      children: [
                        Container(
                          height: 44,
                          padding: EdgeInsets.only(left: 15,right: 15),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Container(),
                              Text('发布',style: TextStyle(fontSize: 15,color: Color(0xFF000000),decoration: TextDecoration.none,fontWeight: FontWeight.bold),),
                              Icon(Icons.close,size: 20,color: Color(0xFF000000),)
                            ],
                          ),
                        ),
                        Divider(height: 0.5,thickness: 0.5,color: Color(0x1A000000),),
                        Container(
                          height: 155,
                          child: Row(
                            children: [
                              GestureDetector(
                                child: Container(
                                  width: MediaQuery.of(context).size.width/2-0.25,
                                  height: 60,
                                  child: Column(
                                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                    children: [
                                      Image(
                                        image: AssetImage('lib/images/photo.png'),
                                        height: 30,
                                        width: 30
                                      ),
                                      Text('发布图文',style: TextStyle(fontSize: 15,color: Color(0xFF81858C),decoration: TextDecoration.none),),
                                    ],
                                  ),
                                ),
                                onTap: (){
                                  Navigator.pop(context);
                                  Navigator.of(context).push(
                                    CupertinoPageRoute(
                                      builder: (context){
                                        return YSAddSquare(isPhoto: true,);
                                      }
                                    )
                                  );
                                },
                              ),
                              Container(
                                height: 80,
                                width: 0.5,
                                color: Color(0x1A000000)
                              ),
                              GestureDetector(
                                onTap: (){
                                  Navigator.pop(context);
                                  Navigator.of(context).push(
                                      CupertinoPageRoute(
                                          builder: (context){
                                            return YSAddSquare(isPhoto: false,);
                                          }
                                      )
                                  ).then((value){
                                    if(value!=null){
                                      _refreshData();
                                    }
                                  });
                                },
                                child: Container(
                                  width: MediaQuery.of(context).size.width/2-0.25,
                                  height: 60,
                                  child: Column(
                                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                    children: [
                                      Image(
                                          image: AssetImage('lib/images/video.png'),
                                          height: 30,
                                          width: 30
                                      ),
                                      Text('发布视频',style: TextStyle(fontSize: 15,color: Color(0xFF81858C),decoration: TextDecoration.none),),
                                    ],
                                  ),
                                ),
                              )
                            ],
                          ),
                        ),
                      ],
                    ),
                  );
                }
              );
            },
          )
        ],
      )
    );
  }

  _getSquareTitleData() async{
    SharedPreferences prefer = await SharedPreferences.getInstance();
    _name = prefer.getString('name')??'';
    Map dict = await ysRequestHttp(context,type: requestType.get,api: '/app/piazza/SquareCommunity/type/list',parameter: {},isLoading: true,isToken: true,refresh: (){
      _getSquareTitleData();
    });
    if(dict!=null){
      setState(() {
        _titles = dict['data'];
      });
      _refreshData();
    }
  }
  Future<void> _refreshData() async{
    _page = 1;
    Map dict = await ysRequestHttp(context,type: requestType.get,api: '/app/piazza/SquareCommunity/list',parameter: {'pageNo':_page,'pageSize':10,'id':_titles[_selected]['id']},isToken: true,refresh: (){
      _refreshData();
    });
    if(dict!=null){
      setState(() {
        _dataArray = dict['data']['resultList'];
      });
    }
  }

  Future<void> _loadMore() async{
    _page++;
    Map dict = await ysRequestHttp(context,type: requestType.get,api: '/app/piazza/SquareCommunity/list',parameter: {'pageNo':_page,'pageSize':10,'id':_titles[_selected]['id']},isToken: true,refresh: (){
      _loadMore();
    });
    if(dict!=null){
      setState(() {
        _dataArray.addAll(dict['data']['resultList']);
      });
    }
  }

  _postAgreementData(int index) async{
    Map request = {'type':1};
    if(_dataArray[index]['type']==0){
      request['squareId'] = _dataArray[index]['id'];
    }else{
      request['topicId'] = _dataArray[index]['id'];
    }
    Map dict = await ysRequestHttp(context,type: requestType.post,api: '/app/piazza/SquareCommunity/likeAndCollect',parameter: request,isLoading: false,isToken: true,refresh: (){

    });
    if(dict!=null){
      setState(() {
        _dataArray[index]['likeStatus'] = dict['data'];
        if(dict['data'] == 0){
          _dataArray[index]['likeCounts'] = int.parse('${_dataArray[index]['likeCounts']}') - 1;
        }else{
          _dataArray[index]['likeCounts'] = int.parse('${_dataArray[index]['likeCounts']}') + 1;
        }
      });
    }
  }
}