import 'package:flutter/material.dart';
import 'package:liftmanager/internal/team/presenter/team_list_presenter.dart';
import 'package:liftmanager/internal/team/team_router.dart';
import 'package:liftmanager/mvp/base_page_state.dart';
import 'package:liftmanager/routers/fluro_navigator.dart';
import 'package:liftmanager/internal/search/presenter/base_list_provider.dart';
import 'package:liftmanager/internal/team/model/team_entity.dart';
import 'package:liftmanager/res/resources.dart';
import 'package:liftmanager/utils/image_utils.dart';
import 'package:liftmanager/utils/theme_utils.dart';
import 'package:liftmanager/utils/toast.dart';
import 'package:liftmanager/widgets/app_bar.dart';
import 'package:liftmanager/widgets/load_image.dart';
import 'package:liftmanager/widgets/my_button.dart';
import 'package:liftmanager/widgets/my_refresh_list.dart';
import 'package:liftmanager/widgets/popup_window.dart';
import 'package:liftmanager/widgets/state_layout.dart';
import 'package:provider/provider.dart' as p;

class TeamListPage extends StatefulWidget {
  @override
  TeamListPageState createState() {
    return TeamListPageState();
  }
}

class TeamListPageState extends BasePageState<TeamListPage, TeamListPresenter> {
  BaseListProvider<TeamItem> provider = BaseListProvider<TeamItem>();
  GlobalKey _addKey = GlobalKey();

  Future _onRefresh() async {
    await presenter.myTeamList(context);
  }

  @override
  void initState() {
    provider.setStateTypeNotNotify(StateType.loading);
    super.initState();
    _onRefresh();
  }

  ///切换团队
  _changeTeam(int index) {
    showAlert(
        context,
        "切换团队",
        "是否切换到:${provider.list[index].name}",
        "切换",
        () {
          NavigatorUtils.goBack(context);
          presenter.changeTeam(context, provider.list[index].id);
        },
        txt2: "取消",
        onPre2: () {
          NavigatorUtils.goBack(context);
        });
  }

  @override
  Widget build(BuildContext context) {
    return p.ChangeNotifierProvider<BaseListProvider<TeamItem>>(
        create: (_) => provider,
        child: WillPopScope(
            onWillPop: () {
              NavigatorUtils.goBackWithParams(context, true);
              return Future.value(false);
            },
            child: Scaffold(
                appBar: MyAppBar(
                  centerTitle: "团队管理",
                  actions: <Widget>[
                    IconButton(
                      key: _addKey,
                      onPressed: () {
                        _showAddMenu();
                      },
                      icon: LoadAssetImage(
                        "icon_add",
                        key: const Key('add'),
                        width: 20.0,
                        height: 20.0,
                        color: Colors.black,
                      ),
                    )
                  ],
                ),
                body: p.Consumer<BaseListProvider<TeamItem>>(
                    builder: (_, provider, __) {
                  bool isDark = ThemeUtils.isDark(context);
                  return MyListView(
                    key: Key('order_search_list'),
                    itemCount: provider.list.length,
                    stateType: provider.stateType,
                    onRefresh: _onRefresh,
//                loadMore: _load,
//                itemExtent: 67.0,
                    hasMore: provider.hasMore,
                    itemBuilder: (_, index) {
                      return Container(
                        color: isDark ? Colours.dark_bg_color : Colors.white,
                        padding: const EdgeInsets.symmetric(
                            horizontal: 15.0, vertical: 12.0),
                        alignment: Alignment.centerLeft,
                        child: Row(
                          children: <Widget>[
                            CircleAvatar(
                                radius: 21.5,
                                backgroundColor: Colors.transparent,
                                backgroundImage: ImageUtils.getImageProvider(
                                    provider.list[index]?.logoImg)),
                            Gaps.hGap10,
                            Expanded(
                                flex: 1,
                                child: Column(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: <Widget>[
                                    Text(
                                      provider.list[index].name,
                                      style: TextStyle(
                                          fontSize: 15,
                                          color: isDark
                                              ? Colours.dark_text
                                              : Colours.text),
                                    ),
                                    Text(
                                      "${provider.list[index]?.remarks}",
                                      style: TextStyles.textGray13,
                                      maxLines: 2,
                                      overflow: TextOverflow.ellipsis,
                                    )
                                  ],
                                )),
                            MyButton(
                              key: const Key('login'),
                              onPressed: () {
                                if (provider.list[index].currentTeamFlag)
                                  return;
                                _changeTeam(index);
                              },
                              height: 25,
                              fontSize: 11,
                              backColor:provider.list[index].currentTeamFlag
                                  ? Colours.blue_app_main
                                  : Colors.white,
                              colors: provider.list[index].currentTeamFlag
                                  ? [Colours.blue_app_main, Colours.blue_app_main]
                                  : [Colors.white, Colors.white],
                              borderWidth: 0.5,
                              borderColor: Colours.blue_app_main,
                              text: provider.list[index].currentTeamFlag
                                  ? "当前团队"
                                  : "切换团队",
                              textColor: provider.list[index].currentTeamFlag
                                  ? Colors.white
                                  : Colours.blue_app_main,
                            )
                          ],
                        ),
                      );
                    },
                  );
                }))));
  }

  _showAddMenu() {
    final RenderBox button = _addKey.currentContext.findRenderObject();
    final RenderBox overlay = Overlay.of(context).context.findRenderObject();
    var a = button.localToGlobal(
        Offset(button.size.width - 8.0, button.size.height - 12.0),
        ancestor: overlay);
    var b = button.localToGlobal(button.size.bottomLeft(Offset(0, -12.0)),
        ancestor: overlay);
    final RelativeRect position = RelativeRect.fromRect(
      Rect.fromPoints(a, b),
      Offset.zero & overlay.size,
    );
    final Color backgroundColor = ThemeUtils.getBackgroundColor(context);
    final Color _iconColor = ThemeUtils.getIconColor(context);
    showPopupWindow(
      context: context,
      fullWidth: false,
      isShowBg: true,
      position: position,
      elevation: 0.0,
      child: GestureDetector(
        onTap: () => NavigatorUtils.goBack(context),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.only(right: 12.0),
              child: LoadAssetImage(
                "icon_jt",
                width: 8.0,
                height: 4.0,
              ),
            ),
            SizedBox(
              width: 120.0,
              height: 40.0,
              child: FlatButton.icon(
                  textColor: Theme.of(context).textTheme.body1.color,
                  onPressed: () {
                    Navigator.pop(context);
                    NavigatorUtils.pushResult(
                        context, '${TeamRouter.teamCreatePage}', (res) {
                      _onRefresh();
                    });
                  },
                  color: backgroundColor,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(8.0),
                        topRight: Radius.circular(8.0)),
                  ),
                  icon: LoadAssetImage(
                    "wode/icon_team_add",
                    width: 16.0,
                    height: 16.0,
                    color: _iconColor,
                  ),
                  label: const Text("创建团队")),
            ),
            Container(width: 120.0, height: 0.6, color: Colours.line),
            SizedBox(
              width: 120.0,
              height: 40.0,
              child: FlatButton.icon(
                  textColor: Theme.of(context).textTheme.body1.color,
                  color: backgroundColor,
                  onPressed: () {
                    Navigator.pop(context);
                    NavigatorUtils.push(
                        context, '${TeamRouter.teamSearchPage}');
                  },
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.only(
                        bottomLeft: Radius.circular(8.0),
                        bottomRight: Radius.circular(8.0)),
                  ),
                  icon: LoadAssetImage(
                    "wode/icon_team_add",
                    width: 16.0,
                    height: 16.0,
                    color: _iconColor,
                  ),
                  label: const Text("加入团队")),
            ),
          ],
        ),
      ),
    );
  }

  @override
  TeamListPresenter createPresenter() {
    return TeamListPresenter();
  }
}