import 'dart:async';
import 'package:flutter/material.dart';
import 'package:agora_rtc_engine/rtc_engine.dart';
import 'package:permission_handler/permission_handler.dart';
import 'package:will_play/views/palRoom/PalRoom.dart';
import 'package:will_play/utils/auth.dart';

import '../../utils/http_util.dart';
import '../../api/part.dart';

class PartyPage extends StatefulWidget {
  PartyPage({Key? key}) : super(key: key);

  @override
  State<PartyPage> createState() => _PartyPageState();
}

class _PartyPageState extends State<PartyPage> {
  final _search = TextEditingController();
  final _tabDataList = [
    Tab(text: '关注'),
    Tab(text: '推荐'),
    Tab(text: '相亲'),
    Tab(text: 'KTV'),
    Tab(text: '交友'),
    Tab(text: '音乐'),
  ];

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      initialIndex: 1, // 默认选中
      length: 6,
      child: Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          elevation: 0, // z轴阴影
          leading: null,
          titleSpacing: 10, // 标题与其他控件的间隔
          backgroundColor: Colors.white,
          title: Container(
            height: 35,
            margin: EdgeInsetsDirectional.only(end: 25),
            padding: EdgeInsets.fromLTRB(20, 0, 20, 0),
            decoration: BoxDecoration(
              color: Color.fromRGBO(247, 247, 247, 1),
              borderRadius: BorderRadius.circular(30),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                SizedBox(
                  child: Padding(
                    padding: EdgeInsets.only(right: 5),
                    child: Image.asset(
                      'images/party/search.png',
                      width: 17.0,
                      height: 17.0,
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
                Expanded(
                  flex: 1,
                  child: TextField(
                    controller: _search,
                    decoration: InputDecoration(
                      isDense: true,
                      border: InputBorder.none,
                      hintText: '搜索房间号',
                      hintStyle: TextStyle(
                        fontSize: 12,
                        color: Color.fromRGBO(203, 203, 203, 1),
                      ),
                    ),
                    style: TextStyle(
                      fontSize: 12,
                      color: Colors.black,
                    ),
                    textInputAction: TextInputAction.search, // 键盘右下角图标
                  ),
                ),
              ],
            ),
          ),
          actions: [
            IconButton(
              onPressed: () {
                Navigator.pushNamed(context, 'CreateRoom');
              },
              icon: Image.asset(
                'images/party/create.png',
                fit: BoxFit.cover,
                width: 22.0,
                height: 22.0,
              ),
            ),
          ],
          bottom: TabBar(
            // isScrollable: true,
            indicatorSize: TabBarIndicatorSize.label, // 指示器大小计算方式
            indicatorColor: Color.fromRGBO(255, 255, 255, 0), // 指示器颜色
            labelColor: Colors.black, // 选中label颜色
            labelStyle: TextStyle(fontSize: 18), // 选中label的Style
            unselectedLabelStyle: TextStyle(fontSize: 14), // 未选中label的Style
            unselectedLabelColor:
                Color.fromRGBO(153, 153, 153, 1), // 未选中label颜色
            tabs: _tabDataList,
            enableFeedback: true,
            onTap: (index) {
              print(_tabDataList[index]);
            },
          ),
        ),
        body: TabBarView(
          children: [
            ViewsWidget(),
            ViewsWidget(),
            ViewsWidget(),
            ViewsWidget(),
            ViewsWidget(),
            ViewsWidget(),
          ],
        ),
      ),
    );
  }
}

// tab视图页组件
class ViewsWidget extends StatefulWidget {
  ViewsWidget({Key? key}) : super(key: key);

  @override
  State<ViewsWidget> createState() => _ViewsWidgetState();
}

class _ViewsWidgetState extends State<ViewsWidget> {
  List _list = [
    {
      "photo": "images/party/photo1.png",
      "name": "小明",
      "num": "12",
      "title": "今日听君歌一曲",
      "type": "music",
      "sex": "0",
      "role": ClientRole.Broadcaster,
    },
    {
      "photo": "images/party/photo1.png",
      "name": "小红",
      "num": "12",
      "title": "成年人的避风港",
      "type": "pal",
      "sex": "1",
      "role": ClientRole.Audience,
    },
    {
      "photo": "images/party/photo1.png",
      "name": "小红",
      "num": "12",
      "title": "成年人的避风港",
      "type": "pal",
      "sex": "1",
      "role": ClientRole.Audience,
    },
    {
      "photo": "images/party/photo1.png",
      "name": "小黑",
      "num": "12",
      "title": "今日听君歌一曲",
      "type": "auction",
      "sex": "0",
      "role": ClientRole.Audience,
    },
    {
      "photo": "images/party/photo1.png",
      "name": "小白",
      "num": "122",
      "title": "今日听君歌一曲",
      "type": "family",
      "sex": "0",
      "role": ClientRole.Audience,
    },
    {
      "photo": "images/party/photo1.png",
      "name": "小白",
      "num": "122",
      "title": "今日听君歌一曲",
      "type": "family",
      "sex": "0",
      "role": ClientRole.Audience,
    },
  ];
  int page = 1; // 当前页面
  int size = 10; // 每页N条
  late int total; // 总条数
  bool isLoadmore = false; // 加载更多
  List _data = []; // 列表数据
  // 给ListView加一个 ScrollController 组件，通过事件监听滚动条的高度来显示和隐藏加载更多的组件
  ScrollController _scrollController = new ScrollController();

  // 判断是否开启权限方法
  Future<void> _handleCameraAndMic(Permission permission) async {
    PermissionStatus status = await permission.request();
    print('权限状态$status');
    if (!status.isGranted) {
      openAppSettings();
    }
  }

  // 页面跳转方法
  Future<void> _onJoin(agoraToken, userName, channelName, role) async {
    await _handleCameraAndMic(Permission.camera);
    await _handleCameraAndMic(Permission.microphone);

    await Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => PalRoomPage(
          agoraToken: agoraToken,
          userName: userName,
          channelName: channelName,
          role: role,
        ),
      ),
    );
  }

  // 刷新列表方法
  _onRefresh() {
    _data.clear();
    this.page = 1;
    getList({'page': this.page, 'size': this.size}).then((res) {
      print('_onRefresh：${res.data}');
      setState(() {
        _data.addAll(res.data['content']);
      });
    });
  }

  // 加载数据方法
  _onLoadmore() {
    this.page++;
    getList({'page': this.page, 'size': this.size}).then((res) {
      setState(() {
        print('_onLoadmore：${res.data}');
        _data.addAll(res.data['content']);
        isLoadmore = false;
      });
    });
  }

  // 加载中动画组件
  Widget _loadMoreWidget() {
    return Padding(
      padding: EdgeInsets.all(15.0),
      child: Center(child: CircularProgressIndicator()),
    );
  }

  @override
  void initState() {
    super.initState();

    getList({'page': this.page, 'size': this.size}).then((res) {
      // print('列表数据：${res.data}');
      print('${res.data['content']}');
      setState(() {
        _data.addAll(res.data['content']!);
      });
    });

    // _onRefresh();
    // _scrollController.addListener(() {
    //   if (_scrollController.position.pixels ==
    //       _scrollController.position.maxScrollExtent) {
    //     _onLoadmore();
    //   }
    // });
  }

  @override
  void dispose() {
    super.dispose();
    _scrollController.dispose();
  }

  void _agoraToken(roomId, channelName, role) async {}

  @override
  Widget build(BuildContext context) {
    // return RefreshIndicator( onRefresh: _onRefresh(),
    return SingleChildScrollView(
      child: Column(
        children: [
          Container(
            padding: EdgeInsets.fromLTRB(15, 15, 15, 0),
            child: GestureDetector(
              child: Image.asset('images/party/banner.png'),
              onTap: () {
                print('Banner on tap');
              },
            ),
          ),
          _data.length > 0
              ? ListView.builder(
                  controller: _scrollController,
                  itemCount: _data.length,
                  shrinkWrap: true,
                  itemBuilder: (BuildContext context, int index) {
                    // if (index == this.data.length - 1) {
                    //   return _loadMoreWidget();
                    // }
                    return GestureDetector(
                      onTap: () async {
                        var res = await MyHttpUtil()
                            .get("/chat/api/auth/agora/token", data: {
                          'channelName': _data[index]['id'],
                          'role': 2
                        });

                        var agoraToken = res.data["token"];
                        String uid = await Storage.get('id');
                        String userName = await Storage.get('userName'); // 用户名

                        print(agoraToken);
                        print(_data[index]['id']);

                        _onJoin(agoraToken, userName, _data[index]['id'],
                            ClientRole.Audience);
                      },
                      child: Container(
                        height: 75,
                        padding: EdgeInsets.all(5),
                        margin: EdgeInsets.fromLTRB(15, 30, 15, 0),
                        width: double.infinity,
                        decoration: BoxDecoration(
                          color: Color.fromRGBO(255, 255, 255, 1),
                          borderRadius: BorderRadius.all(Radius.circular(50)),
                          boxShadow: [
                            BoxShadow(
                                color: Color.fromRGBO(0, 0, 0, 0.1),
                                offset: Offset(0.0, 1.0), // 阴影xy轴偏移量
                                blurRadius: 1.0, // 阴影模糊程度
                                spreadRadius: 1.0 // 阴影扩散程度
                                )
                          ],
                        ),
                        child: Row(
                          children: [
                            ClipOval(
                              child: Image.asset(
                                'images/party/photo1.png',
                                width: 65,
                                height: 65,
                              ),
                            ),
                            SizedBox(
                              width: 10,
                            ),
                            Expanded(
                                flex: 1,
                                child: Column(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: [
                                    Row(
                                      children: [
                                        typeElement(type: 'pal'),
                                        Container(
                                          child: Text(
                                            _data[index]['name'],
                                            overflow: TextOverflow.ellipsis,
                                            style: TextStyle(
                                                color: Color.fromRGBO(
                                                    51, 51, 51, 1),
                                                fontSize: 16),
                                          ),
                                        )
                                      ],
                                    ),
                                    SizedBox(height: 9),
                                    Row(
                                      children: [
                                        Image.asset(
                                          'images/party/live.png',
                                          width: 17,
                                          height: 18,
                                        ),
                                        SizedBox(width: 5),
                                        Text(
                                          _data[index]['id'],
                                          overflow: TextOverflow.ellipsis,
                                          style: TextStyle(
                                              color: Color.fromRGBO(
                                                  153, 153, 153, 1),
                                              fontSize: 12),
                                        )
                                      ],
                                    ),
                                  ],
                                )),
                          ],
                        ),
                      ),
                    );
                  },
                )
              : Container(
                  padding: EdgeInsets.all(15),
                  child: Center(
                    child: Text('暂无数据～'),
                  ),
                ),
        ],
      ),
    );
  }
}

// 房间类型标签小组件
class typeElement extends StatelessWidget {
  String type;

  var typeData = {
    "music": {
      'title': "音乐",
      'color': [
        Color.fromRGBO(207, 167, 248, 1),
        Color.fromRGBO(133, 157, 254, 1),
      ],
    },
    "pal": {
      "title": "交友",
      'color': [
        Color.fromRGBO(207, 167, 248, 1),
        Color.fromRGBO(133, 157, 254, 1),
      ],
    },
    "auction": {
      "title": "拍卖",
      "color": [
        Color.fromRGBO(249, 163, 125, 1),
        Color.fromRGBO(251, 218, 137, 1),
      ]
    },
    "family": {
      'title': "家族",
      "color": [
        Color.fromRGBO(85, 221, 236, 1),
        Color.fromRGBO(66, 224, 154, 1),
      ]
    },
  };

  var textData = {"music": '音乐', "pal": '交友', "auction": '拍卖', "family": '家族'};

  var colorData = {
    "music": [
      Color.fromRGBO(207, 167, 248, 1),
      Color.fromRGBO(133, 157, 254, 1),
    ],
    "pal": [
      Color.fromRGBO(254, 174, 205, 1),
      Color.fromRGBO(247, 111, 162, 1),
    ],
    "auction": [
      Color.fromRGBO(249, 163, 125, 1),
      Color.fromRGBO(251, 218, 137, 1),
    ],
    "family": [
      Color.fromRGBO(85, 221, 236, 1),
      Color.fromRGBO(66, 224, 154, 1),
    ],
  };

  typeElement({Key? key, this.type = ''}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 32,
      height: 16,
      margin: EdgeInsets.only(right: 5),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(
          Radius.circular(8),
        ),
        gradient: LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: colorData[type] ?? [],
        ),
      ),
      child: Text(
        textData[type] ?? "",
        textAlign: TextAlign.center,
        style: TextStyle(color: Colors.white, fontSize: 10),
      ),
    );
  }
}