import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      debugShowCheckedModeBanner: false,
      localizationsDelegates: const [
        DefaultMaterialLocalizations.delegate,
        DefaultCupertinoLocalizations.delegate,
        DefaultWidgetsLocalizations.delegate,
      ],
      builder: (context, child) {
        return MediaQuery(
          data: MediaQuery.of(context)
              .copyWith(textScaler: const TextScaler.linear(1.0)),
          child: const CupertinoPageScaffold(
            backgroundColor: Colors.black,
            child: SafeArea(
              child: CustomScrollView(
                slivers: [
                  WxSliverAppBar(child: Header()),
                  SliverPadding(
                      padding: EdgeInsets.all(16),
                      sliver: SliverToBoxAdapter(
                          child: Divider(color: Colors.white))),
                  SliverToBoxAdapter(child: Header()),
                  SliverPadding(
                      padding: EdgeInsets.all(16),
                      sliver: SliverToBoxAdapter(
                          child: Divider(color: Colors.white))),
                  SliverToBoxAdapter(child: Header()),
                ],
              ),
            ),
          ),
        );
      },
    );
  }
}

class WxSliverAppBar extends StatefulWidget {
  const WxSliverAppBar({
    super.key,
    required this.child,
  });

  final Widget child;

  @override
  State<WxSliverAppBar> createState() => _WxSliverAppBarState();
}

class _WxSliverAppBarState extends State<WxSliverAppBar> {
  final _childKey = GlobalKey();
  double _height = 0;

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

  void _updateHeight() {
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      if (_childKey.currentContext == null) return;
      setState(() {
        _height = (_childKey.currentContext!.findRenderObject()! as RenderBox)
            .size
            .height;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    if (_height == 0) {
      return SliverToBoxAdapter(
        child: Container(key: _childKey, child: const Header()),
      );
    } else {
      return SliverAppBar(
        expandedHeight: _height,
        primary: false,
        backgroundColor: Colors.transparent,
        flexibleSpace: LayoutBuilder(
          builder: (context, constraints) {
            return const FlexibleSpaceBar(
              background: Header(),
            );
          },
        ),
      );
    }
  }
}

class Header extends StatelessWidget {
  const Header({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          height: 145,
          decoration: const BoxDecoration(
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(24),
              topRight: Radius.circular(24),
            ),
            image: DecorationImage(
              image: NetworkImage(
                  'https://live.staticflickr.com/65535/17123251389_80282733ce_z.jpg'),
              fit: BoxFit.cover,
            ),
          ),
        ),
        Padding(
          padding: const EdgeInsets.only(left: 24, right: 24, top: 16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              const Text(
                'Top Returns กองทุนรวมติดชาร์ต',
                style: TextStyle(
                  fontSize: 24,
                  color: Colors.white,
                ),
              ),
              Text(
                '• ข้อมูล ณ ${DateTime.now()}',
                style: const TextStyle(
                  fontSize: 12,
                  color: Colors.white,
                ),
              ),
              const SizedBox(height: 16),
              const Text(
                'โอกาสเข้าลงทุนหุ้น Healthcare ในจังหวะราคาปรับฐาน แนะนำเน้นกลุ่ม High Quality Growth ที่มีกระแสเงินสดแข็งแกร่ง โอกาสเข้าลงทุนหุ้น Healthcare ในจังหวะราคาปรับฐาน แนะนำเน้นกลุ่ม High Quality Growth ที่มีกระแสเงินสดแข็งแกร่ง โอกาสเข้าลงทุนหุ้น Healthcare ในจังหวะราคาปรับฐาน แนะนำเน้นกลุ่ม High Quality Growth ที่มีกระแสเงินสดแข็งแกร่ง โอกาสเข้าลงทุนหุ้น Healthcare ในจังหวะราคาปรับฐาน แนะนำเน้นกลุ่ม High Quality Growth ที่มีกระแสเงินสดแข็งแกร่ง โอกาสเข้าลงทุนหุ้น Healthcare ในจังหวะราคาปรับฐาน แนะนำเน้นกลุ่ม High Quality Growth ที่มีกระแสเงินสดแข็งแกร่ง โอกาสเข้าลงทุนหุ้น Healthcare ในจังหวะราคาปรับฐาน แนะนำเน้นกลุ่ม High Quality Growth ที่มีกระแสเงินสดแข็งแกร่ง โอกาสเข้าลงทุนหุ้น Healthcare ในจังหวะราคาปรับฐาน แนะนำเน้นกลุ่ม High Quality Growth ที่มีกระแสเงินสดแข็งแกร่ง',
                style: TextStyle(
                  fontSize: 12,
                  color: Colors.white,
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }
}