import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_swiper_null_safety/flutter_swiper_null_safety.dart';
import 'package:huixiang/generated/l10n.dart';
import 'package:huixiang/view_widget/icon_text.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:huixiang/view_widget/round_button.dart';

class BrandPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _BrandPage();
  }
}

class _BrandPage extends State<BrandPage>
    with SingleTickerProviderStateMixin, AutomaticKeepAliveClientMixin {
  ScrollController tabcontroller;

  List<String> tabs = [
    S.current.bainianchuanjiao,
    S.current.haixiajiemei,
    S.current.qianjinmaiwei,
  ];

  Map<String, String> images = {
    S.current.bainianchuanjiao: "assets/image/icon_chili.png",
    S.current.haixiajiemei: "assets/image/icon_milk_tea.png",
    S.current.qianjinmaiwei: "assets/image/icon_bread.png",
  };

  // GlobalKey contentGlobalKey = GlobalKey();
  // GlobalKey tabGlobalKey = GlobalKey();
  GlobalKey chiliGlobalKey = GlobalKey();
  GlobalKey milkTeaGlobalKey = GlobalKey();
  GlobalKey breadGlobalKey = GlobalKey();

  // GlobalKey visibleGlobalKey = GlobalKey();

  @override
  void initState() {
    super.initState();
    if (tabcontroller == null) tabcontroller = ScrollController();
    tabcontroller.addListener(() {
      // RenderBox contentRenderBox = contentGlobalKey.currentContext.findRenderObject();
      RenderBox chiliRenderBox =
          chiliGlobalKey.currentContext.findRenderObject();
      RenderBox milkTeaRenderBox =
          milkTeaGlobalKey.currentContext.findRenderObject();
      RenderBox breadRenderBox =
          breadGlobalKey.currentContext.findRenderObject();
      // Offset contentOffset = contentRenderBox.localToGlobal(Offset.zero);
      Offset chiliOffset = chiliRenderBox.localToGlobal(Offset.zero);
      Offset milkTeaOffset = milkTeaRenderBox.localToGlobal(Offset.zero);
      Offset breadOffset = breadRenderBox.localToGlobal(Offset.zero);

      print("chiliOffset: ${chiliOffset.dy}");
      print("milkTeaOffset: ${milkTeaOffset.dy}");
      print("breadOffset: ${breadOffset.dy}");

      var top = 96.h;

      if (chiliOffset.dy <= top) {
        if (!isVisible) {
          isVisible = true;
        }
      } else {
        isVisible = false;
        selectedIndex = "";
      }
      if (chiliOffset.dy <= top && milkTeaOffset.dy > top) {
        selectedIndex = tabs[0];
      } else if (milkTeaOffset.dy <= top && breadOffset.dy > top) {
        selectedIndex = tabs[1];
      } else if (breadOffset.dy <= top) {
        selectedIndex = tabs[2];
      }
      setState(() {});
    });
  }

  String selectedIndex = "";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        toolbarHeight: 40 - MediaQuery.of(context).padding.top,
        backgroundColor: Colors.white,
        elevation: 0,
      ),
      body: Container(
        // key: contentGlobalKey,
        child: Stack(
          children: [
            Container(
              child: SingleChildScrollView(
                physics: BouncingScrollPhysics(),
                controller: tabcontroller,
                child: Container(
                  color: Color(0xFFF7F7F7),
                  margin: EdgeInsets.only(top: 16),
                  child: Column(
                    children: [
                      banner(),
                      buildInfo(),
                      buildTab(),
                      // Container(
                      //   decoration: new BoxDecoration(
                      //     border: Border(
                      //         bottom:
                      //             BorderSide(color: Colors.black, width: 0.0)),
                      //     color: Colors.black,
                      //   ),
                      //   key: chiliGlobalKey,
                      //   child: Image.asset(
                      //     "assets/image/brand_store_cj.png",
                      //     fit: BoxFit.fill,
                      //     width: double.infinity,
                      //   ),
                      // ),
                      Container(
                        decoration: new BoxDecoration(
                          border: Border(
                              bottom:
                                  BorderSide(color: Colors.black, width: 0.0)),
                          color: Colors.black,
                        ),
                        padding:
                            EdgeInsets.only(left: 79, right: 85, bottom: 34),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.spaceAround,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Padding(
                              padding: EdgeInsets.only(bottom: 8),
                              child: Text(
                                "02  百年川椒(光谷店）",
                                style: TextStyle(
                                    fontSize: 12, color: Color(0xffFFFCF5)),
                              ),
                            ),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.start,
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text(
                                  "地址:",
                                  style: TextStyle(
                                      fontSize: 10, color: Colors.white),
                                ),
                                Padding(
                                  padding: EdgeInsets.only(bottom: 5),
                                  child: Text(
                                    "洪山区关山大道哈乐城2楼(保利时\n代)",
                                    style: TextStyle(
                                        fontSize: 10, color: Colors.white),
                                  ),
                                ),
                              ],
                            ),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: [
                                Expanded(
                                  flex: 1,
                                  child: Text(
                                    "时间:09:30-21:30",
                                    style: TextStyle(
                                        fontSize: 10, color: Colors.white),
                                  ),
                                ),
                                Container(
                                  padding: EdgeInsets.only(
                                      left: 7, right: 10, bottom: 2, top: 2),
                                  width: 43,
                                  height: 14,
                                  decoration: new BoxDecoration(
                                    image: new DecorationImage(
                                      image: new AssetImage(
                                          "assets/image/icon_look.png"),
                                    ),
                                  ),
                                  child: Text(
                                    "去逛逛",
                                    style: TextStyle(
                                        fontSize: 8, color: Colors.white),
                                  ),
                                ),
                              ],
                            )
                          ],
                        ),
                      ),
                      SizedBox(
                        height: 16,
                      ),
                      // Container(
                      //   decoration: new BoxDecoration(
                      //     border: Border(
                      //         bottom:
                      //             BorderSide(color: Colors.white, width: 0.0)),
                      //     color: Colors.white,
                      //   ),
                      //   key: milkTeaGlobalKey,
                      //   child: Image.asset(
                      //     "assets/image/brand_store_hx.png",
                      //     fit: BoxFit.fill,
                      //     width: double.infinity,
                      //   ),
                      // ),
                      Container(
                        decoration: new BoxDecoration(
                          border: Border(
                              bottom:
                                  BorderSide(color: Colors.white, width: 0.0)),
                          color: Colors.white,
                        ),
                        padding:
                            EdgeInsets.only(left: 32, right: 33, bottom: 18),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.spaceAround,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Row(
                              mainAxisAlignment: MainAxisAlignment.start,
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Padding(
                                  padding: EdgeInsets.only(right: 12),
                                  child: Text(
                                    "●",
                                    style: TextStyle(
                                        fontSize: 10, color: Color(0xffE2BA83)),
                                  ),
                                ),
                                Padding(
                                  padding: EdgeInsets.only(bottom: 8),
                                  child: Text(
                                    "武昌区松竹路汉街总部国际C座正对面(肥肥虾庄旁)",
                                    style: TextStyle(
                                        fontSize: 10, color: Color(0xff604843)),
                                  ),
                                ),
                              ],
                            ),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: [
                                Padding(
                                  padding: EdgeInsets.only(right: 12),
                                  child: Text(
                                    "●",
                                    style: TextStyle(
                                        fontSize: 10, color: Color(0xffE2BA83)),
                                  ),
                                ),
                                Expanded(
                                  flex: 1,
                                  child: Text(
                                    "10:00-21:00",
                                    style: TextStyle(
                                        fontSize: 10, color: Color(0xff604843)),
                                  ),
                                ),
                                Text(
                                  "去逛逛",
                                  style: TextStyle(
                                      fontSize: 13, color: Color(0xff604843)),
                                ),
                                Image.asset("assets/image/icon_right_z.png"),
                              ],
                            )
                          ],
                        ),
                      ),
                      SizedBox(
                        height: 16,
                      ),
                      // Container(
                      //   decoration: new BoxDecoration(
                      //     border: Border(
                      //         bottom: BorderSide(
                      //             color: Color(0xff052C4B), width: 0.0)),
                      //     color: Color(0xff052C4B),
                      //   ),
                      //   key: breadGlobalKey,
                      //   child: Image.asset(
                      //     "assets/image/brand_store_bg.png",
                      //     fit: BoxFit.fill,
                      //     width: double.infinity,
                      //   ),
                      // ),
                      Container(
                        decoration: new BoxDecoration(
                          border: Border(
                              bottom: BorderSide(
                                  color: Color(0xff052C4B), width: 0.0)),
                          color: Color(0xff052C4B),
                        ),
                        padding:
                            EdgeInsets.only(left: 46, right: 44, bottom: 21),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.spaceAround,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Padding(
                              padding: EdgeInsets.only(bottom: 8),
                              child: Text(
                                "01  前进麦味(光谷店）",
                                style: TextStyle(
                                    fontSize: 12, color: Color(0xffFFFCF5)),
                              ),
                            ),
                            Padding(
                              padding: EdgeInsets.only(bottom: 5),
                              child: Text(
                                "地址:洪山区关山大道328号附7号",
                                style: TextStyle(
                                    fontSize: 10, color: Colors.white),
                              ),
                            ),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: [
                                Expanded(
                                  flex: 1,
                                  child: Text(
                                    "时间:09:00-20:30",
                                    style: TextStyle(
                                        fontSize: 10, color: Colors.white),
                                  ),
                                ),
                                Text(
                                  "去了解",
                                  style: TextStyle(
                                      fontSize: 13, color: Color(0xffFFFDF6)),
                                ),
                                Image.asset("assets/image/icon_right.png"),
                              ],
                            )
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
            Positioned(
              child: Visibility(
                visible: isVisible,
                child: Container(
                  width: MediaQuery.of(context).size.width,
                  child: Container(
                    height: 52.h,
                    color: Colors.white,
                    padding: EdgeInsets.all(6),
                    alignment: Alignment.center,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children:
                          tabs.map((e) => item(e, selectedIndex == e)).toList(),
                    ),
                  ),
                ),
              ),
              top: 0,
            ),
          ],
        ),
      ),
    );
  }

  bool isVisible = false;

  Widget buildTab() {
    return Container(
      // key: tabGlobalKey,
      height: 52.h,
      padding: EdgeInsets.all(6),
      alignment: Alignment.center,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: tabs.map((e) => item(e, selectedIndex == e)).toList(),
      ),
    );
  }

  Widget item(text, isSelected) {
    return GestureDetector(
      onTap: () {
        FlexParentData parendData;
        if (text == S.of(context).bainianchuanjiao) {
          parendData =
              chiliGlobalKey.currentContext.findRenderObject().parentData;
        } else if (text == S.of(context).haixiajiemei) {
          parendData =
              milkTeaGlobalKey.currentContext.findRenderObject().parentData;
        } else if (text == S.of(context).qianjinmaiwei) {
          parendData =
              breadGlobalKey.currentContext.findRenderObject().parentData;
        }
        double offset = parendData.offset.dy - 52.h + 20;
        tabcontroller.animateTo(offset,
            duration: Duration(seconds: 1), curve: Curves.ease);
      },
      child: tabItem(text, selectedIndex == text),
    );
  }

  Widget tabItem(text, isSelected) {
    if (isSelected) {
      return IconText(
        text,
        isMax: false,
        rightImage: images[text],
        iconSize: 16,
        iconColor: Colors.red,
        textStyle: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 16,
            color: Color(0xFF353535)),
      );
    } else {
      return IconText(
        text,
        isMax: false,
        textStyle: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 16,
            color: Color(0xFF353535)),
      );
    }
  }

  Widget buildInfo() {
    return Container(
      margin: EdgeInsets.only(bottom: 20, top: 16),
      padding: EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.white,
        boxShadow: [
          BoxShadow(
              color: Colors.black.withAlpha(12),
              offset: Offset(0, 2),
              blurRadius: 14,
              spreadRadius: 0)
        ],
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              ClipOval(
                child: Image.network(
                  "https://t7.baidu.com/it/u=2841334870,333581502&fm=193&f=GIF",
                  fit: BoxFit.cover,
                  width: 60,
                  height: 60,
                ),
                clipBehavior: Clip.hardEdge,
              ),
              SizedBox(
                width: 16,
              ),
              Expanded(
                child: Container(
                  height: 60,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text.rich(
                        TextSpan(children: [
                          TextSpan(
                            text: "李旭清",
                            style: TextStyle(
                                fontWeight: FontWeight.bold,
                                fontSize: 14,
                                color: Colors.black),
                          ),
                          TextSpan(
                            text: " 集团创办人",
                            style: TextStyle(fontSize: 10, color: Colors.black),
                          ),
                        ]),
                        textDirection: TextDirection.ltr,
                      ),
                      Text(
                        "李旭清女士于1993年创建以「地球公民责任」为企业理念，打造一个与环境共存共荣的永续..",
                        overflow: TextOverflow.ellipsis,
                        maxLines: 2,
                        style: TextStyle(
                          fontSize: 12,
                          color: Color(0xFF353535),
                        ),
                      ),
                    ],
                  ),
                ),
                flex: 1,
              )
            ],
          ),
          SizedBox(
            height: 40,
          ),
          Text(
            "海峡姐妹餐饮集团介绍",
            style: TextStyle(
                fontSize: 16.sp,
                fontWeight: FontWeight.bold,
                color: Colors.black),
          ),
          SizedBox(
            height: 20,
          ),
          Text(
            "湖北海峡姐妹餐饮有限公司于2019年08月01日成立。法定代表人李旭清，公司经营范围包括：餐饮服务（凭食品经营许可证在有效期内从事经营活动）；餐饮管理；烘焙、冷热饮料制售；预包装食品、散装食品销售；蔬果宅配；超市市场零售；中央厨房经营与管理；物业管理；酒制品生产、销售等。",
            textAlign: TextAlign.justify,
            style: TextStyle(fontSize: 12.sp, color: Color(0xFF353535)),
          ),
          SizedBox(
            height: 40,
          ),
          Text(
            "理念",
            style: TextStyle(
                fontSize: 16.sp,
                fontWeight: FontWeight.bold,
                color: Colors.black),
          ),
          SizedBox(
            height: 20,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [idea(), idea(), idea()],
          ),
        ],
      ),
    );
  }

  banner() {
    var images = [
      "https://t7.baidu.com/it/u=963301259,1982396977&fm=193&f=GIF",
      "https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF",
      "https://t7.baidu.com/it/u=1297102096,3476971300&fm=193&f=GIF",
      "https://t7.baidu.com/it/u=91673060,7145840&fm=193&f=GIF",
      "https://t7.baidu.com/it/u=3655946603,4193416998&fm=193&f=GIF"
    ];
    return Container(
      child: AspectRatio(
        aspectRatio: 2.08,
        child: Swiper(
            viewportFraction: 0.88,
            scale: 0.93,
            pagination: SwiperPagination(
              alignment: Alignment.bottomCenter,
              builder: DotSwiperPaginationBuilder(
                size: 8,
                activeSize: 8,
                space: 5,
                activeColor: Colors.black,
                color: Colors.black.withAlpha(76),
              ),
            ),
            itemBuilder: (context, position) {
              return Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(8)),
                  ),
                  child: ClipRRect(
                    borderRadius: BorderRadius.all(
                      Radius.circular(8),
                    ),
                    child: Image(
                      fit: BoxFit.cover,
                      image: NetworkImage(images.elementAt(position)),
                    ),
                  ));
            },
            itemCount: images.length),
      ),
    );
  }

  Widget idea() {
    return Stack(
      children: [
        ClipRRect(
          borderRadius: BorderRadius.circular(4),
          child: Image.network(
            "https://t7.baidu.com/it/u=354366862,33514804&fm=193&f=GIF",
            width: 71,
            height: 71,
            fit: BoxFit.cover,
          ),
        ),
        Positioned(
          bottom: 0,
          child: Container(
            width: 71,
            decoration: BoxDecoration(
              color: Colors.black.withAlpha(125),
              borderRadius: BorderRadius.only(
                bottomRight: Radius.circular(4),
                bottomLeft: Radius.circular(4),
              ),
            ),
            padding: EdgeInsets.symmetric(vertical: 2),
            alignment: Alignment.center,
            child: Text(
              "有机原料",
              style: TextStyle(
                color: Colors.white,
                fontSize: 12.sp,
              ),
            ),
          ),
        )
      ],
    );
  }

  @override
  bool get wantKeepAlive => true;
}