import 'dart:convert';

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_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/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:flutter_bloc/flutter_bloc.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;

  /// 联想列表的item点击事件
  _onThinkItemClick(SearchThinkModel model){
    Navigator.push(context, MaterialPageRoute(
      builder: (_)=> SearchResultPage(model.toJson())
    ));
  }

  @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));
      }
    });
    super.initState();
  }

  @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('#999999'),
            labelColor: HexColor.fromHex('#FF4242'),
            // indicatorSize: TabBarIndicatorSize.label,
            indicator: MaterialIndicator(
              height: 2.5,
              topLeftRadius: 8,
              topRightRadius: 8,
              bottomLeftRadius: 8,
              bottomRightRadius: 8,
              color: HexColor.fromHex('#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());
      }).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,
      ),
    );
  }

}