import 'dart:convert';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:tab_indicator_styler/tab_indicator_styler.dart';
import 'package:zhiying_base_widget/pages/search_page/item/search_item_page.dart';
import 'package:zhiying_base_widget/pages/search_page/notifier/search_tag_notifier.dart';
import 'package:zhiying_base_widget/pages/search_result_page/search_result_page.dart';
import 'package:zhiying_base_widget/pages/search_think_page/bloc/search_think_bloc.dart';
import 'package:zhiying_base_widget/pages/search_think_page/model/search_think_model.dart';
import 'package:zhiying_base_widget/widgets/home/home_quick_entry/cached_network_image_util.dart';
import 'package:zhiying_base_widget/widgets/search/input/model/search_tab_bar_event.dart';
import 'package:zhiying_base_widget/widgets/search/tabbar/search_tab_sk.dart';
import 'package:zhiying_base_widget/widgets/search/widget/my_tab.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:zhiying_comm/zhiying_comm.dart';
import 'package:provider/provider.dart';
import 'model/search_tab_model.dart';

class SearchTabWidget extends StatefulWidget {
  final Map<String, dynamic> data;
  SearchTabModel model;

  SearchTabWidget(this.data, {Key key}) : super(key: key) {
    try {
      model = SearchTabModel.fromJson(jsonDecode(data['data']));
    } catch (e) {
      Logger.error(e.toString());
    }
  }

  @override
  _SearchTabWidgetState createState() => _SearchTabWidgetState();
}

class _SearchTabWidgetState extends State<SearchTabWidget> {
  TabController _tabController;
  String _type = GlobalConfig.PROVIDER_TB;

  /// 联想列表的item点击事件
  _onThinkItemClick(SearchThinkModel model) {
    model.type = _type;
    RouterUtil.hideKeyboard(context);
    Provider.of<SearchTagNotifier>(context, listen: false).addTag(model?.keywords);
    BlocProvider.of<SearchThinkBloc>(context).add(SearchThinkShowBaseViewEvent());
    Navigator.push(
        context, CupertinoPageRoute(builder: (_) => SearchResultPage(model.toJson()..['tag'] = 'search_page')));
  }

  @override
  void initState() {
    _tabController = TabController(length: widget?.model?.search_icon_list?.length ?? 0, vsync: ScrollableState())
      ..addListener(() {
        // String type = '';
        // try{
        //   type = widget.model.search_icon_list[_tabController.index].type;
        // }catch(_){}
        // if(!EmptyUtil.isEmpty(type)) {
        //   BlocProvider.of<SearchThinkBloc>(context).add(SearchThinkChangeTypeEvent(type));
        // }
        if (!_tabController.indexIsChanging) {
          Logger.log('_tabController.indexIsChanging = ${_tabController?.index}');
          try {
            _type = widget.model.search_icon_list[_tabController.index].type;
            Provider.of<SearchTagNotifier>(context, listen: false).setType(_type);
            EventUtil.instance.fire(SearchTabBarEvent(_type));
          } catch (e, s) {
            Logger.error(e, s);
          }
        }
      });
    for (int i = 0; i < widget?.model?.search_icon_list?.length ?? 0; i++) {
      if (Provider.of<SearchTagNotifier>(context, listen: false).getType() == widget?.model?.search_icon_list[i].type) {
        _tabController.animateTo(i);
      }
    }
    WidgetsBinding.instance.addPostFrameCallback((_) => setTabSelect());
    super.initState();
  }

  setTabSelect() {
    for (int i = 0; i < widget.model.search_icon_list.length; i++) {
      print("tab选择的类型" + widget.model.search_icon_list[i].type);
    }
    // setState(() {
    //   _tabController.animateTo(2);
    // });
  }

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

  @override
  Widget build(BuildContext context) {
    return _getMainWidget(widget?.model);
  }

  /// 获取主视图
  Widget _getMainWidget(SearchTabModel model) {
    return Visibility(
      replacement: SearchTabSkeleton(),
      visible: !EmptyUtil.isEmpty(model),
      child: _getTabar(model),
    );
  }

  /// 获取TabBar
  Widget _getTabar(SearchTabModel model) {
    return Container(
      margin: const EdgeInsets.only(/*left: 12.5, right: 12.5,*/ top: 20),
      child: Column(
        children: <Widget>[
          TabBar(
            controller: _tabController,
            isScrollable: true,
            labelStyle: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
            unselectedLabelColor: HexColor.fromHex(model?.nameColor ?? '#999999'),
            labelColor: HexColor.fromHex(model?.nameSelectColor ?? '#FF4242'),
            // indicatorSize: TabBarIndicatorSize.label,
            indicator: MaterialIndicator(
              height: 2.5,
              topLeftRadius: 8,
              topRightRadius: 8,
              bottomLeftRadius: 8,
              bottomRightRadius: 8,
              color: HexColor.fromHex(model?.lineSelectColor ?? '#FF4242'),
              horizontalPadding: 25,
            ),
            tabs: model.search_icon_list.map((item) {
              return MyTab(
                icon: CachedNetworkImage(
                  imageUrl: item?.with_icon_color ?? '',
                  width: 14,
                ),
                text: item.name,
              );
            }).toList(),
          ),
          Expanded(
            child: _getItemWidget(model),
          ),
        ],
      ),
    );
  }

  /// 根据输入框，是否显示联想列表还是其它
  Widget _getItemWidget(SearchTabModel model) {
    return Stack(
      children: <Widget>[
        _getTabBarView(model),
        BlocConsumer<SearchThinkBloc, SearchThinkState>(
          listener: (context, state) {},
          buildWhen: (prev, current) {
            if (current is SearchThinkErrorState) {
              return false;
            }
            return true;
          },
          builder: (context, state) {
            // return Visibility(
            //   replacement: _getTabBarView(model),
            //
            //   child: _getThinkListWidget(),
            // );

            if (state is SearchThinkLoadedState) {
              return _getThinkListWidget(state.model);
            }
            return Container();
          },
        ),
      ],
    );
  }

  /// tabBarView
  Widget _getTabBarView(SearchTabModel model) {
    return TabBarView(
      controller: _tabController,
      children: model.search_icon_list.map((item) {
        // TODO 这里需要和后台沟通改成页面的唯一标示
        // return PageFactory.create('search_item_page', item.toJson());
        return SearchItemPage(item.toJson());
      }).toList(),
    );
  }

  /// 联想列表
  Widget _getThinkListWidget(List<SearchThinkModel> model) {
    return Container(
      color: Colors.white,
      height: double.infinity,
      child: ListView.builder(
        itemBuilder: (context, index) {
          SearchThinkModel item = model[index];
          return GestureDetector(
            onTap: () => _onThinkItemClick(item),
            child: Container(
              decoration:
                  BoxDecoration(border: Border(bottom: BorderSide(width: 0.5, color: HexColor.fromHex('#EEEEEE')))),
              padding: const EdgeInsets.only(top: 13, bottom: 13),
              child: Text(
                '${item?.keywords}',
                style: TextStyle(color: HexColor.fromHex('#333333'), fontSize: 14),
              ),
            ),
          );
        },
        itemCount: model?.length ?? 0,
        padding: const EdgeInsets.only(left: 12.5, right: 12.5),
        shrinkWrap: true,
      ),
    );
  }
}