syncrow-web/lib/common/custom_expansion_tile.dart

import 'package:flutter/material.dart';
import 'package:syncrow_web/utils/color_manager.dart';

class CustomExpansionTile extends StatefulWidget {
  final String title;
  final List<Widget>? children;
  final bool initiallyExpanded;
  final bool isSelected; // Add this to track selection
  final bool? isExpanded; // External control over expansion
  final ValueChanged<bool>? onExpansionChanged; // Notify when expansion changes
  final VoidCallback? onItemSelected; // Callback for selecting the item

  CustomExpansionTile({
    required this.title,
    this.children,
    this.initiallyExpanded = false,
    this.isExpanded, // Allow external control over expansion
    this.onExpansionChanged, // Notify when expansion changes
    this.onItemSelected, // Trigger item selection when name is tapped
    required this.isSelected, // Add this to initialize selection state
  });

  @override
  CustomExpansionTileState createState() => CustomExpansionTileState();
}

class CustomExpansionTileState extends State<CustomExpansionTile> {
  bool _isExpanded = false; // Local expansion state

  @override
  void initState() {
    super.initState();
    _isExpanded = widget.initiallyExpanded;
  }

  @override
  void didUpdateWidget(CustomExpansionTile oldWidget) {
    super.didUpdateWidget(oldWidget);
    // Sync local state with external control of expansion state
    if (widget.isExpanded != null && widget.isExpanded != _isExpanded) {
      setState(() {
        _isExpanded = widget.isExpanded!;
      });
    }
  }

  // Utility function to capitalize the first letter of the title
  String _capitalizeFirstLetter(String text) {
    if (text.isEmpty) return text;
    return text[0].toUpperCase() + text.substring(1);
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Row(
          children: [
            // Checkbox with independent state management
            Checkbox(
              value: false,
              onChanged: (bool? value) {
                setState(() {});
              },
              side: WidgetStateBorderSide.resolveWith((states) {
                return const BorderSide(color: ColorsManager.grayBorder);
              }),
              fillColor: WidgetStateProperty.resolveWith((states) {
                if (states.contains(WidgetState.selected)) {
                  return ColorsManager.grayBorder;
                } else {
                  return ColorsManager.checkBoxFillColor;
                }
              }),
              checkColor: ColorsManager.whiteColors,
            ),
            // Expand/collapse icon, now wrapped in a GestureDetector for specific onTap
            if (widget.children != null && widget.children!.isNotEmpty)
              GestureDetector(
                onTap: () {
                  setState(() {
                    _isExpanded = !_isExpanded;
                    widget.onExpansionChanged?.call(_isExpanded);
                  });
                },
                child: Icon(
                  _isExpanded
                      ? Icons.keyboard_arrow_down
                      : Icons.keyboard_arrow_right,
                  color: Colors.grey,
                  size: 16.0, // Adjusted size for better alignment
                ),
              ),
            // The title text, wrapped in GestureDetector to handle selection
            Expanded(
              child: GestureDetector(
                onTap: () {
                  // Triggerxq the onItemSelected callback when the name is tapped
                  if (widget.onItemSelected != null) {
                    widget.onItemSelected!();
                  }
                  debugPrint('${widget.title} ${widget.isSelected} tapped for selection');
                },
                child: Text(
                  _capitalizeFirstLetter(widget.title),
                  style: TextStyle(
                    color: widget.isSelected
                        ? Colors.black // Change color to black when selected
                        : ColorsManager
                            .lightGrayColor, // Gray when not selected
                    fontWeight: FontWeight.w400,
                  ),
                ),
              ),
            ),
          ],
        ),
        // The expanded section (children) that shows when the tile is expanded
        if (_isExpanded &&
            widget.children != null &&
            widget.children!.isNotEmpty)
          Padding(
            padding: const EdgeInsets.only(left: 48.0), // Indented children
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: widget.children!,
            ),
          ),
      ],
    );
  }
}