import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:liftmanager/internal/notification/model/notification_list_entity.dart';
import 'package:liftmanager/internal/notification/presenter/notification_list_presenter.dart';
import 'package:liftmanager/internal/search/presenter/base_list_provider.dart';
import 'package:liftmanager/mvp/base_page_state.dart';
import 'package:liftmanager/res/resources.dart';
import 'package:liftmanager/routers/fluro_navigator.dart';
import 'package:liftmanager/utils/image_utils.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 NotificationListPage extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return NotificationListPageState();
  }
}

class NotificationListPageState extends BasePageState<NotificationListPage,NotificationListPresenter> {
  BaseListProvider<NotificationListItem> provider = BaseListProvider<NotificationListItem>();
  GlobalKey _addKey = GlobalKey();

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

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

  @override
  Widget build(BuildContext context) {
    return p.ChangeNotifierProvider<BaseListProvider<NotificationListItem>>(
        create: (_) => provider,
        child: Scaffold(
            appBar: MyAppBar(
              centerTitle: "团队管理",
              actions: <Widget>[
                IconButton(
                  key: _addKey,
                  onPressed: () {
                    _showAddMenu();
                  },
                  icon: LoadAssetImage(
                    "icon_add",
                    key: const Key('add'),
                    width: 24.0,
                    height: 24.0,
                    color: Colors.white,
                  ),
                )
              ],
            ),
            body: p.Consumer<BaseListProvider<NotificationListItem>>(
                builder: (_, provider, __) {
                  return MyListView(
                    key: Key('order_search_list'),
                    itemCount: provider.list.length,
                    stateType: provider.stateType,
                    onRefresh: _onRefresh,
//                loadMore: _loadMore,
                    itemExtent: 67.0,
                    hasMore: provider.hasMore,
                    itemBuilder: (_, index) {
                      return Container(
                        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: TextStyles.text15,),
                                    Text("${provider.list[index]?.remarks}",
                                      style: TextStyles.textGray13,overflow:TextOverflow.clip ,maxLines: 2,)
                                  ],
                                )
                            ),
                            MyButton(
                              key: const Key('login'),
                              onPressed: () {

                              },
                              height: 25,
                              fontSize: 11,
                              colors:
                              provider.list[index].currentTeamFlag ? [Colours
                                  .app_main, Colours.app_main] : [
                                Colors.white,
                                Colors.white
                              ],
                              borderWidth: 0.5,
                              borderColor: Colours.app_main,
                              text: provider.list[index].currentTeamFlag
                                  ? "当前团队"
                                  : "切换团队",
                              textColor: provider.list[index].currentTeamFlag
                                  ? Colors.white
                                  : Colours.app_main,
                            )
                          ],
                        ),
                      );
                    },
                  );
                })));
  }

  /// design/4商品/index.html#artboard4
  _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: () {

                  },
                  color: Colors.white,
                  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: Colors.black,
                  ),
                  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: Colors.white,
                  onPressed: () {

                  },
                  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: Colors.black,
                  ),
                  label: const Text("加入团队")),
            ),
          ],
        ),
      ),
    );
  }

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