import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:zhiying_base_widget/widgets/goods_details/slide_banner/bloc/goods_details_slide_banner_bloc.dart';
import 'package:zhiying_base_widget/widgets/goods_details/slide_banner/bloc/goods_details_slide_banner_repository.dart';
import 'package:zhiying_base_widget/widgets/goods_details/slide_banner/goods_details_slide_banner_sk.dart';
import 'package:zhiying_base_widget/widgets/goods_details/slide_banner/model/goods_details_silde_banner_model.dart';
import 'package:zhiying_comm/zhiying_comm.dart';
import 'package:cached_network_image/cached_network_image.dart';

///
/// 商品详情轮播图
///
class GoodsDetailsSlideBannerWidget extends StatelessWidget {
  final Map<String, dynamic> model;

  const GoodsDetailsSlideBannerWidget(this.model, {Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BlocProvider<GoodsDetailsSlideBannerBloc>(
      create: (_) => GoodsDetailsSlideBannerBloc(repository: GoodsDetailsSlideBannerRepository())..add(GoodsDetailsSlideBannerInitEvent(model: model)),
      child: GoodsDetailsSlideBannerContainer(model),
    );
  }
}

class GoodsDetailsSlideBannerContainer extends StatefulWidget {
  final Map<String, dynamic> model;

  const GoodsDetailsSlideBannerContainer(this.model, {Key key}) : super(key: key);

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

class _GoodsDetailsSlideBannerContainerState extends State<GoodsDetailsSlideBannerContainer> {
  /// 子元素点击事件
  void _itemOnClick(IndexCarousel model) {
    print('点击了 $model');
  }

  @override
  Widget build(BuildContext context) {
    return BlocConsumer<GoodsDetailsSlideBannerBloc, GoodsDetailsSlideBannerState>(
      listener: (BuildContext context, GoodsDetailsSlideBannerState state) {
        if (state is GoodsDetailsSlideBannerErrorState) {
          print('数据加载出错');
        }
      },
      buildWhen: (previous, current) {
        /// 数据加载出错不进行build
        if (current is GoodsDetailsSlideBannerErrorState) {
          return false;
        }
        return true;
      },
      builder: (context, state) {
        print('currente state = $state');
        if (state is GoodsDetailsSlideBannerLoadedState) {
          if (!EmptyUtil.isEmpty(state.model) && !EmptyUtil.isEmpty(state.model.index_carousel_list)) {
            return _getMainWidget(state.model);
          }
        }
        // 骨架屏
        return GoodsDetailsSlideBannerSkeleton();
      },
    );
  }

  /// 页面
  Widget _getMainWidget(GoodsDetailsSlideBannerModel datas) {
    return Container(
      width: double.infinity,
      height: 375,
      child: Swiper(
        itemBuilder: (BuildContext context, int index) {
          IndexCarousel items = datas.index_carousel_list[index];
          return Container(
            width: double.infinity,
            child: CachedNetworkImage(imageUrl: items?.img ?? '', fit: BoxFit.cover),
          );
        },
        itemCount: datas?.index_carousel_list?.length ?? 0,
        loop: true,
        autoplay: true,
        onTap: (index) => _itemOnClick(datas.index_carousel_list[index]),
        pagination: _getSwiperStyleByType(datas, datas?.index_carousel_list?.length ?? 0),
      ),
    );
  }

  /// 获取进度样式
  SwiperPlugin _getSwiperStyleByType(GoodsDetailsSlideBannerModel model, int pageCount) {
    if ('1' != model.pagination_open) {
      return null;
    }

    if ('type_number' == model.pagination) {
      return _getNumswiperPlugin(pageCount, model.pagination_select_color, model.pagination_unselect_color);
    }
    if ('type_point' == model.pagination) {
      return _swiperCustomPaginationDito(pageCount, model.pagination_select_color, model.pagination_unselect_color);
    }
    if ('type_bar' == model.pagination) {
      return _swiperCustomPagination(pageCount, model.pagination_select_color, model.pagination_unselect_color);
    }
    return null;
  }

  /// 数字样式
  SwiperPlugin _getNumswiperPlugin(int pageCount, String selectColor, String unselectColor) {
    return SwiperCustomPagination(builder: (BuildContext context, SwiperPluginConfig config) {
      return Align(
        alignment: Alignment(0.0, 0.9),
        child: Container(
            padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 18),
            decoration: BoxDecoration(borderRadius: BorderRadius.circular(13), color: HexColor.fromHex('#4D000000')),
            child: RichText(
              text: TextSpan(text: '${config.activeIndex + 1}', style: TextStyle(fontSize: 12, color: HexColor.fromHex(selectColor)), children: [
                TextSpan(text: '/', style: TextStyle(fontSize: 12, color: HexColor.fromHex(unselectColor))),
                TextSpan(text: '$pageCount', style: TextStyle(fontSize: 12, color: HexColor.fromHex(unselectColor))),
              ]),
            )),
      );
    });
  }

  /// 自定义进度条
  SwiperPlugin _swiperCustomPagination(int pageCount, String selectColor, String unselectColor) {
    List list = [];
    for (int i = 0; i < pageCount; i++) {
      list.add(i);
    }

    return SwiperCustomPagination(builder: (BuildContext context, SwiperPluginConfig config) {
      return Align(
        alignment: Alignment(0.0, 0.9),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: list.map((index) {
            var borderRadius;
            if (index == 0) {
              borderRadius = BorderRadius.only(topLeft: Radius.circular(2), bottomLeft: Radius.circular(2));
            }
            if (index == list.length - 1) {
              borderRadius = BorderRadius.only(topRight: Radius.circular(2), bottomRight: Radius.circular(2));
            }

            if (index == config.activeIndex) {
              borderRadius = BorderRadius.all(Radius.circular(2));
            }

            return Container(
              height: 4,
              width: 25,
              decoration: BoxDecoration(borderRadius: borderRadius, color: index == config.activeIndex ? HexColor.fromHex(selectColor) : HexColor.fromHex(unselectColor)),
            );
          }).toList(),
        ),
      );
    });
  }

  /// 圆形进度条
  SwiperPlugin _swiperCustomPaginationDito(int pageCount, String selectColor, String unselectColor) {
    return SwiperPagination(
        margin: const EdgeInsets.only(),
        builder: DotSwiperPaginationBuilder(color: HexColor.fromHex(unselectColor), activeColor: HexColor.fromHex(selectColor), size: 8, activeSize: 8));
  }
}
