import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import '../../../../library/library.dart';
import '../../../app.dart';
import 'product_about_widget.dart';
import 'product_characteristics.dart';
import 'product_image_header.dart';
import 'product_info.dart';
import 'product_review.dart';

class SliverAppBarWithTabBar extends StatefulWidget {
  final ProductModel model;
  final ProductController pc;

  SliverAppBarWithTabBar({required this.model, required this.pc});

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

class _SliverAppBarWithTabBarState extends State<SliverAppBarWithTabBar> {
  //Variables needed to adapt FlexibleSpaceBar text color (title)
  late ScrollController _scrollController;
  bool lastStatus = true;
  double height = 320.h;

  void _scrollListener() {
    if (_isShrink != lastStatus) {
      setState(() {
        lastStatus = _isShrink;
      });
    }
  }

  bool get _isShrink {
    return _scrollController.hasClients && _scrollController.offset > (height - kToolbarHeight);
  }

  @override
  void initState() {
    super.initState();

    _scrollController = ScrollController()..addListener(_scrollListener);
  }

  @override
  void dispose() {
    _scrollController.removeListener(_scrollListener);
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: DefaultTabController(
          length: 3,
          child: NestedScrollView(
            controller: _scrollController,
            headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
              return <Widget>[
                SliverAppBar(
                  expandedHeight: height,
                  pinned: true,
                  leading: SizedBox.shrink(),
                  flexibleSpace: FlexibleSpaceBar(
                    centerTitle: true,
                    stretchModes: [StretchMode.zoomBackground],
                    expandedTitleScale: 1.05,
                    title: _isShrink
                        ? Row(children: [Expanded(child: ProductNameWidget(model: widget.model))])
                        : SingleChildScrollView(
                            // physics: NeverScrollableScrollPhysics(),
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.end,
                              crossAxisAlignment: CrossAxisAlignment.stretch,
                              children: <Widget>[
                                // SizedBox(height: 10.h),
                                ProductNameWidget(model: widget.model),
                                SizedBox(height: 10.h),
                                Padding(
                                  padding: const EdgeInsets.symmetric(horizontal: 16),
                                  child: ProductImageHeader(images: widget.model.images, model: widget.model),
                                ),
                                SizedBox(height: 10.h),
                                ProductPriceWidget(model: widget.model),
                                AppTheme.appColorDivider,
                              ],
                            ),
                          ),
                  ),
                ),
                SliverPersistentHeader(
                  delegate: MySliverPersistentHeaderDelegate(
                    TabBar(
                      onTap: (index) => widget.pc.onTapChange(index),
                      labelColor: ThemeColor.color3A3A3A,
                      labelPadding: EdgeInsets.symmetric(horizontal: 25.w),
                      labelStyle: TextStyle(
                        color: ThemeColor.color3A3A3A,
                        fontSize: 12.sp,
                        fontWeight: FontWeight.bold,
                      ),
                      indicatorColor: ThemeColor.mainColor,
                      isScrollable: true,
                      indicator: MaterialIndicator(
                        color: ThemeColor.mainColor,
                        strokeWidth: 3,
                        topLeftRadius: 4,
                        topRightRadius: 4,
                        bottomLeftRadius: 4,
                        bottomRightRadius: 4,
                        height: 3,
                      ),
                      tabs: [
                        Tab(text: 'about_product'.tr),
                        Tab(text: 'specifications'.tr),
                        Tab(text: 'reviews'.tr),
                      ],
                    ),
                  ),
                ),
              ];
            },
            body: TabBarView(
              children: [
                ProductAboutWidget(model: widget.model),
                ProductCharacteristicsWidget(model: widget.model, pc: widget.pc),
                ProductReviewWidget(model: widget.model),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class MySliverPersistentHeaderDelegate extends SliverPersistentHeaderDelegate {
  MySliverPersistentHeaderDelegate(this._tabBar);

  final TabBar _tabBar;

  @override
  double get minExtent => _tabBar.preferredSize.height;
  @override
  double get maxExtent => _tabBar.preferredSize.height;

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return DecoratedBox(
      //This is responsible for the background of the tabbar, does the magic
      decoration: BoxDecoration(
        //This is for background color
        color: Colors.white.withOpacity(0.0),
        //This is for bottom border that is needed
        border: Border(bottom: BorderSide(color: ThemeColor.colorE5E5E5, width: 3)),
      ),
      child: _tabBar,
    );
  }

  @override
  bool shouldRebuild(MySliverPersistentHeaderDelegate oldDelegate) {
    return false;
  }
}
