apskel-owner-flutter/lib/presentation/pages/home/home_page.dart

import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:line_icons/line_icons.dart';

import '../../../application/home/home_bloc.dart';
import '../../../common/constant/app_constant.dart';
import '../../../common/theme/theme.dart';
import '../../../injection.dart';
import '../../components/button/button.dart';
import '../../components/spacer/spacer.dart';
import 'widgets/feature.dart';
import 'widgets/header.dart';
import 'widgets/stats.dart';
import 'widgets/top_product.dart';

@RoutePage()
class HomePage extends StatefulWidget implements AutoRouteWrapper {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();

  @override
  Widget wrappedRoute(BuildContext context) => BlocProvider(
    create: (context) => getIt<HomeBloc>()..add(HomeEvent.fetchedDashboard()),
    child: this,
  );
}

class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
  late AnimationController _headerAnimationController;
  late AnimationController _contentAnimationController;

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

    _headerAnimationController = AnimationController(
      duration: const Duration(milliseconds: 800),
      vsync: this,
    );

    _contentAnimationController = AnimationController(
      duration: const Duration(milliseconds: 1200),
      vsync: this,
    );

    _startAnimations();
  }

  void _startAnimations() {
    _headerAnimationController.forward();
    Future.delayed(const Duration(milliseconds: 200), () {
      _contentAnimationController.forward();
    });
  }

  @override
  void dispose() {
    _headerAnimationController.dispose();
    _contentAnimationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColor.background,
      body: RefreshIndicator(
        onRefresh: () {
          context.read<HomeBloc>().add(HomeEvent.fetchedDashboard());
          return Future.value();
        },
        child: BlocBuilder<HomeBloc, HomeState>(
          builder: (context, state) {
            return CustomScrollView(
              physics: const BouncingScrollPhysics(
                parent: ClampingScrollPhysics(),
              ),
              slivers: [
                // SliverAppBar with HomeHeader as background
                SliverAppBar(
                  expandedHeight: 260, // Adjust based on HomeHeader height
                  floating: true,
                  pinned: true,
                  snap: true,
                  elevation: 0,
                  scrolledUnderElevation: 8,
                  backgroundColor: AppColor.primary,
                  surfaceTintColor: Colors.transparent,
                  flexibleSpace: LayoutBuilder(
                    builder: (BuildContext context, BoxConstraints constraints) {
                      // Calculate collapse progress (0.0 = expanded, 1.0 = collapsed)
                      final double expandedHeight = 200;
                      final double collapsedHeight =
                          kToolbarHeight + MediaQuery.of(context).padding.top;
                      final double currentHeight = constraints.maxHeight;

                      double collapseProgress =
                          1.0 -
                          ((currentHeight - collapsedHeight) /
                              (expandedHeight - collapsedHeight));
                      collapseProgress = collapseProgress.clamp(0.0, 1.0);

                      return FlexibleSpaceBar(
                        title: Opacity(
                          opacity:
                              collapseProgress, // Title muncul saat collapse
                          child: Row(
                            children: [
                              Expanded(
                                child: Text(
                                  AppConstant.appName,
                                  style: AppStyle.xl.copyWith(
                                    fontWeight: FontWeight.w700,
                                    fontSize: 18,
                                    letterSpacing: -0.5,
                                    color: AppColor.white,
                                  ),
                                ),
                              ),
                              ActionIconButton(
                                onTap: () {},
                                icon: LineIcons.bell,
                              ),
                            ],
                          ),
                        ),
                        titlePadding: const EdgeInsets.only(
                          left: 20,
                          right: 12,
                          bottom: 16,
                        ),
                        background: AnimatedBuilder(
                          animation: _headerAnimationController,
                          builder: (context, child) {
                            return Transform.translate(
                              offset: Offset(
                                0,
                                50 * (1 - _headerAnimationController.value),
                              ),
                              child: Opacity(
                                opacity: _headerAnimationController.value,
                                child: HomeHeader(
                                  totalRevenue:
                                      state.dashboard.overview.totalSales,
                                ),
                              ),
                            );
                          },
                        ),
                      );
                    },
                  ),
                ),

                // Main Content
                SliverToBoxAdapter(
                  child: AnimatedBuilder(
                    animation: _contentAnimationController,
                    builder: (context, child) {
                      return Transform.translate(
                        offset: Offset(
                          0,
                          30 * (1 - _contentAnimationController.value),
                        ),
                        child: Opacity(
                          opacity: _contentAnimationController.value,
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              HomeFeature(),
                              HomeStats(overview: state.dashboard.overview),
                              HomeTopProduct(
                                products: state.dashboard.topProducts,
                              ),
                              const SpaceHeight(40),
                            ],
                          ),
                        ),
                      );
                    },
                  ),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}