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

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

class _ImperativeNavigationSheetExample extends StatelessWidget {
  const _ImperativeNavigationSheetExample();

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Stack(
          children: [
            Placeholder(),
            _ExampleSheet(),
          ],
        ),
      ),
    );
  }
}

// NavigationSheet requires a special NavigatorObserver in order to
// smoothly change its extent during a route transition.
final _transitionObserver = NavigationSheetTransitionObserver();

class _ExampleSheet extends StatelessWidget {
  const _ExampleSheet();

  @override
  Widget build(BuildContext context) {
    // Create a navigator somehow that will be used for nested navigation in the sheet.
    final nestedNavigator = Navigator(
      // Do not forget to attach the observer!
      observers: [_transitionObserver],
      onGenerateInitialRoutes: (navigator, initialRoute) {
        return [
          // Use DraggableNavigationSheetRoute for a draggable page.
          DraggableNavigationSheetRoute(
            builder: (context) {
              return const _DraggablePage();
            },
            transitionsBuilder:
                (context, animation, secondaryAnimation, child) {
              return SlideTransition(
                position: Tween(begin: const Offset(1, 0), end: Offset.zero)
                    .animate(animation),
                child: child,
              );
            },
          ),
        ];
      },
    );

    // Wrap the nested navigator in a NavigationSheet.
    return SafeArea(
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16),
        child: NavigationSheet(
          transitionObserver: _transitionObserver,
          child: nestedNavigator,
        ),
      ),
    );
  }
}

class _DraggablePage extends StatelessWidget {
  const _DraggablePage();

  void navigateToScrollablePage(BuildContext context) {
    // Use ScrollableNavigationSheetRoute for a scrollable page.
    final route = ScrollableNavigationSheetRoute(
      builder: (context) {
        return const _ScrollablePage();
      },
      // You may want to use a custom page transition.
      transitionsBuilder: (context, animation, secondaryAnimation, child) {
        return SlideTransition(
          position: Tween(begin: const Offset(1, 0), end: Offset.zero)
              .animate(animation),
          child: child,
        );
      },
    );

    Navigator.push(context, route);
  }

  @override
  Widget build(BuildContext context) {
    final title = Text(
      'Draggable Page',
      style: Theme.of(context).textTheme.titleLarge?.copyWith(
            color: Theme.of(context).colorScheme.onSecondaryContainer,
          ),
    );

    return LayoutBuilder(
      builder: (context, constraints) {
        return Container(
          width: constraints.maxWidth,
          height: constraints.maxHeight * 0.5,
          // Add rounded corners
          decoration: ShapeDecoration(
            color: Theme.of(context).colorScheme.secondaryContainer,
            shape: const RoundedRectangleBorder(
              borderRadius: BorderRadius.all(
                Radius.circular(16),
              ),
            ),
          ),
          child: Column(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              title,
              const SizedBox(height: 32),
              TextButton(
                onPressed: () => navigateToScrollablePage(context),
                child: const Text('Next'),
              ),
            ],
          ),
        );
      },
    );
  }
}

class _ScrollablePage extends StatelessWidget {
  const _ScrollablePage();

  @override
  Widget build(BuildContext context) {
    final backgroundColor = Theme.of(context).colorScheme.secondaryContainer;
    return ClipRRect(
      // Add rounded corners
      borderRadius: BorderRadius.circular(16),
      child: Scaffold(
        backgroundColor: backgroundColor,
        appBar: AppBar(
          title: const Text('Scrollable Page'),
          backgroundColor: backgroundColor,
        ),
        body: ListView.builder(
          itemCount: 30,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text('Item #$index'),
            );
          },
        ),
      ),
    );
  }
}