import 'package:comwell_key_app/themes/light_theme.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:snapping_sheet/snapping_sheet.dart';

class BottomSheetWidget extends StatefulWidget {
  final List<Widget> widgetChildren;

  const BottomSheetWidget({
    required this.widgetChildren,
    super.key,
  });

  @override
  State<BottomSheetWidget> createState() => _BottomSheetWidgetState();
}

class _BottomSheetWidgetState extends State<BottomSheetWidget> {
  @override
  void initState() {
    super.initState();
    // Set the navigation bar color to match the bottom sheet
    SystemChrome.setSystemUIOverlayStyle(
      const SystemUiOverlayStyle(
        systemNavigationBarColor: Colors.white,
        systemNavigationBarIconBrightness: Brightness.dark,
      ),
    );
  }

  @override
  void dispose() {
    // Reset the navigation bar color when the bottom sheet is closed
    SystemChrome.setSystemUIOverlayStyle(
      const SystemUiOverlayStyle(
        systemNavigationBarColor: Colors.transparent,
        systemNavigationBarIconBrightness: Brightness.dark,
      ),
    );
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final height = MediaQuery.of(context).size.height;
    final padding = MediaQuery.of(context).padding;
    final safeHeight = height - padding.top - padding.bottom;
    const grabbingHeight = 50.0;
    // Calculate the position factor that will maintain consistent visual position
    // We want the sheet to take up roughly 90% of the safe area height
    // We subtract the grabbing height (75) from the total height to get the actual content area
    final contentHeight = safeHeight - grabbingHeight;
    final topPositionFactor = (contentHeight * 0.80) / safeHeight;

    return SnappingSheet(
      snappingPositions: [
        const SnappingPosition.factor(positionFactor: 0.17),
        SnappingPosition.factor(positionFactor: topPositionFactor),
      ],
      grabbingHeight: grabbingHeight,
      grabbing: Container(
        decoration: const BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
          
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Container(
              margin: const EdgeInsets.only(top: 20),
              width: 70,
              height: 5,
              decoration: BoxDecoration(
                color: colorDivider,
                borderRadius: BorderRadius.circular(5),
              ),
            ),
          ],
        ),
      ),
      sheetBelow: SnappingSheetContent(
        draggable: true,
        child: Container(
          color: Colors.white,
          child: SingleChildScrollView(
              child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: widget.widgetChildren)),
        ),
      ),
    );
  }
}