import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _pageIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: Text(widget.title),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'Page Index: ${this._pageIndex}',
                style: Theme.of(context).textTheme.headlineMedium,
              ),
            ],
          ),
        ),
        bottomNavigationBar: NavigationBar(
          selectedIndex: _pageIndex,
          onDestinationSelected: (int index) {
            setState(() {
              _pageIndex = index;
            });
          },
          destinations: const [
            NavigationDestination(
              label: 'Page 0',
              icon: Icon(Icons.first_page),
            ),
            NavigationDestination(
              label: 'Page 1',
              icon: Icon(Icons.last_page),
            ),
          ],
        ),
        bottomSheet: _pageIndex == 1 ? MyBottomSheet() : null,
        floatingActionButton: _pageIndex == 1
            ? Builder(builder: (context) {
                return FloatingActionButton(
                    onPressed: () {
                      print('FAB shopping press');
                    },
                    child: const Icon(Icons.add));
              })
            : null);
  }
}

class MyBottomSheet extends StatefulWidget {
  const MyBottomSheet({super.key});

  @override
  State<StatefulWidget> createState() => _MyBottomSheetState();
}

class _MyBottomSheetState extends State<MyBottomSheet> {
  late DraggableScrollableController _controller;
  bool expanded = false;

  @override
  void initState() {
    super.initState();
    _controller = DraggableScrollableController();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
      decoration: const BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.vertical(
          top: Radius.circular(0.0),
        ),
      ),
      child: DraggableScrollableSheet(
        expand: false,
        snap: true,
        initialChildSize: 0.25,
        maxChildSize: 0.5,
        snapSizes: [0.5],
        controller: _controller,
        builder: (context, scrollController) {
          return Stack(
            children: [
              Container(
                padding: EdgeInsets.only(
                  top: 50.0,
                ),
                child: CustomScrollView(
                  slivers: [
                    SliverToBoxAdapter(
                      child: Column(
                        children: [
                          Text('Testing 123; expanded: ${expanded}',
                              style: Theme.of(context).textTheme.labelLarge),
                          TextButton(
                              onPressed: () {
                                print("Pressed...");
                                setState(() {
                                  if (!this.expanded) {
                                    this._controller.animateTo(0.5,
                                        duration: Durations.short4,
                                        curve: Curves.easeIn);
                                  }
                                  this.expanded = !expanded;
                                });
                              },
                              child: Text('Toggle'))
                        ],
                      ),
                    ),
                  ],
                ),
              ),
              SingleChildScrollView(
                physics: const ClampingScrollPhysics(),
                controller: scrollController,
                child: Column(
                  children: [
                    SizedBox(
                      height: 12.0,
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Container(
                          width: 30,
                          height: 5,
                          decoration: BoxDecoration(
                              color: Colors.grey[300],
                              borderRadius:
                                  BorderRadius.all(Radius.circular(12.0))),
                        ),
                      ],
                    ),
                    SizedBox(
                      height: 18.0,
                    ),
                  ],
                ),
              ),
            ],
          );
        },
      ),
    );
  }
}