import 'package:flutter/material.dart';
import 'package:liftmanager/internal/heavy/provider/heavy_page.dart';
import 'package:liftmanager/internal/message/widgets/messageList.dart';
import 'package:liftmanager/res/resources.dart';
import 'package:liftmanager/routers/fluro_navigator.dart';
import 'package:liftmanager/utils/theme_utils.dart';
import 'package:liftmanager/widgets/app_bar.dart';
import 'package:provider/provider.dart' as p;

class MessageListPage extends StatefulWidget {
  @override
  MessageListPageState createState() => MessageListPageState();
}

class MessageListPageState extends State<MessageListPage>
    with SingleTickerProviderStateMixin, AutomaticKeepAliveClientMixin {
  HeavyPageProvider provider = HeavyPageProvider();
  List<Map> tabs = [
    {"id": 1, "name": "团队消息"},
    {"id": 2, "name": "保养消息"},
    {"id": 3, "name": "急修消息"},
    {"id": 4, "name": "工作消息"}
  ];
  TabController _tabController;
  PageController _pageController = PageController(initialPage: 0);

  @override
  void initState() {
    super.initState();
    _tabController = new TabController(vsync: this, length: tabs.length);
  }

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

  _onPageChange(int index) {
    _tabController.animateTo(index);
    provider.setIndex(index);
  }

  @override
  Widget build(BuildContext context) {
    return p.ChangeNotifierProvider<HeavyPageProvider>(
        create: (_) => provider,
        child: WillPopScope(
          onWillPop: () {
            NavigatorUtils.goBackWithParams(context, true);
            return Future.value(false);
          },
          child: Scaffold(
            appBar: MyAppBar(
              centerTitle: "消息中心",
            ),
            body: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Container(
                  // 隐藏点击效果
                  color: ThemeUtils.getTabsBg(context),
                  child: TabBar(
                      onTap: (index) {
                        if (!mounted) {
                          return;
                        }
                        _pageController.jumpToPage(index);
                      },
                      isScrollable: false,
                      controller: _tabController,
                      labelStyle: TextStyles.textBold18,
                      indicatorSize: TabBarIndicatorSize.label,
                labelPadding: const EdgeInsets.all(0),
                      unselectedLabelColor: Colours.text_gray,
                      labelColor: Theme.of(context).primaryColor,
                      indicatorPadding:
                          const EdgeInsets.only(left: 5.0, right: 5.0),
                      tabs: tabs.map((map) {
                        return _TabView("${map["name"]}", "", map["id"]);
                      }).toList()),
                ),
                Gaps.line,
                Expanded(
                  child: PageView.builder(
                    key: const Key('pageView'),
                    itemCount: tabs.length,
                    onPageChanged: _onPageChange,
                    controller: _pageController,
                    itemBuilder: (BuildContext context, int index) {
                      return Container(
                          color: ThemeUtils.getBackgroundColor(context),
                          child: MessageList(index: index + 1));
                    },
                  ),
                )
              ],
            ),
          ),
        ));
  }

  @override
  bool get wantKeepAlive => true;
}

class _TabView extends StatelessWidget {
  const _TabView(this.tabName, this.tabSub, this.index);

  final String tabName;
  final String tabSub;
  final int index;

  @override
  Widget build(BuildContext context) {
    return p.Consumer<HeavyPageProvider>(
      builder: (_, provider, child) {
        return Tab(
            child: SizedBox(
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                tabName,
                style: TextStyle(fontSize: 15),
              ),
              Offstage(
                  offstage: provider.index != index,
                  child: Padding(
                    padding: const EdgeInsets.only(top: 1.0),
                    child: Text(tabSub,
                        style: TextStyle(fontSize: Dimens.font_sp12)),
                  )),
            ],
          ),
        ));
      },
    );
  }
}