ionic-planb-logistic-app-flutter/lib/components/map_sidebar_layout.dart

import 'package:flutter/material.dart';
import '../utils/breakpoints.dart';
import '../theme/spacing_system.dart';
import '../theme/size_system.dart';
import '../theme/animation_system.dart';
import '../theme/color_system.dart';

class MapSidebarLayout extends StatefulWidget {
  final Widget mapWidget;
  final Widget Function(bool isCollapsed)? sidebarBuilder;
  final Widget? sidebarWidget;
  final double mapRatio;

  const MapSidebarLayout({
    super.key,
    required this.mapWidget,
    this.sidebarBuilder,
    this.sidebarWidget,
    this.mapRatio = 0.60, // Reduced from 2/3 to give 15% more space to sidebar
  }) : assert(sidebarBuilder != null || sidebarWidget != null,
            'Either sidebarBuilder or sidebarWidget must be provided');

  @override
  State<MapSidebarLayout> createState() => _MapSidebarLayoutState();
}

class _MapSidebarLayoutState extends State<MapSidebarLayout>
    with SingleTickerProviderStateMixin {
  late AnimationController _animationController;
  bool _isExpanded = true;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      duration: const Duration(milliseconds: 300),
      vsync: this,
    );
    if (_isExpanded) {
      _animationController.forward();
    }
  }

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

  void _toggleSidebar() {
    setState(() {
      _isExpanded = !_isExpanded;
    });
    if (_isExpanded) {
      _animationController.forward();
    } else {
      _animationController.reverse();
    }
  }

  @override
  Widget build(BuildContext context) {
    final isMobile = MediaQuery.of(context).size.width < Breakpoints.tablet;
    final isDarkMode = Theme.of(context).brightness == Brightness.dark;

    if (isMobile) {
      return widget.sidebarBuilder != null
          ? widget.sidebarBuilder!(false)
          : widget.sidebarWidget!;
    }

    // Desktop: Show map with collapsible sidebar
    return Row(
      children: [
        Expanded(
          flex: (widget.mapRatio * 100).toInt(),
          child: widget.mapWidget,
        ),
        // Collapsible sidebar with toggle button (expanded: 420px, collapsed: 80px for badge)
        AnimatedContainer(
          duration: const Duration(milliseconds: 300),
          width: _isExpanded ? 420 : 80,
          color: isDarkMode ? SvrntyColors.almostBlack : Colors.white,
          child: Column(
            children: [
              // Header with toggle button
              Container(
                height: kToolbarHeight,
                padding: EdgeInsets.symmetric(horizontal: AppSpacing.xs),
                decoration: BoxDecoration(
                  border: Border(
                    left: BorderSide(
                      color: isDarkMode
                          ? SvrntyColors.darkSlate
                          : SvrntyColors.slateGray.withValues(alpha: 0.2),
                      width: 1,
                    ),
                  ),
                ),
                child: Row(
                  mainAxisAlignment: _isExpanded
                      ? MainAxisAlignment.spaceBetween
                      : MainAxisAlignment.center,
                  children: [
                    if (_isExpanded)
                      Expanded(
                        child: Text(
                          'Deliveries',
                          style: Theme.of(context).textTheme.titleMedium,
                          overflow: TextOverflow.ellipsis,
                        ),
                      ),
                    SizedBox(
                      width: AppSizes.buttonHeightMd,
                      height: AppSizes.buttonHeightMd,
                      child: IconButton(
                        icon: AnimatedRotation(
                          turns: _isExpanded ? 0 : -0.5,
                          duration: Duration(
                            milliseconds:
                                AppAnimations.durationFast.inMilliseconds,
                          ),
                          child: const Icon(Icons.chevron_right),
                        ),
                        onPressed: _toggleSidebar,
                        iconSize: AppSizes.iconMd,
                      ),
                    ),
                  ],
                ),
              ),
              // Sidebar content
              Expanded(
                child: widget.sidebarBuilder != null
                    ? widget.sidebarBuilder!(!_isExpanded)
                    : (_isExpanded ? widget.sidebarWidget! : const SizedBox.shrink()),
              ),
            ],
          ),
        ),
      ],
    );
  }
}