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;

  CustomExpansionTile({
    required this.title,
    this.children,
    this.initiallyExpanded = false,
  });

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

class CustomExpansionTileState extends State<CustomExpansionTile> {
  bool _isExpanded = false;
  bool _isChecked = false;

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        InkWell(
          onTap: () {
            setState(() {
              _isExpanded = !_isExpanded;
            });
          },
          child: Row(
            children: [
              // Customizing the Checkbox
              Checkbox(
                value: _isChecked,
                onChanged: (bool? value) {
                  setState(() {
                    _isChecked = value ?? false;
                  });
                },
                side: WidgetStateBorderSide.resolveWith((states) {
                  if (states.contains(WidgetState.selected)) {
                    return const BorderSide(color: ColorsManager.grayBorder);
                  }
                  return const BorderSide(color: ColorsManager.grayBorder);
                }),
                // Customize the color for different checkbox states
                fillColor: WidgetStateProperty.resolveWith((states) {
                  if (states.contains(WidgetState.selected)) {
                    return ColorsManager.grayBorder; // Checked state color
                  }
                  return ColorsManager
                      .checkBoxFillColor; // Unchecked state color
                }),
                checkColor: ColorsManager.whiteColors, // Checkmark color
              ),
              // Expand/Collapse Icon with reduced size
              if (widget.children != null && widget.children!.isNotEmpty)
                Icon(
                  _isExpanded
                      ? Icons.keyboard_arrow_down // Upward arrow when expanded
                      : Icons
                          .keyboard_arrow_right, // Right arrow when collapsed
                  color: Colors.grey,
                  size: 16.0, // Reduced icon size
                ),
              // Title Text
              Expanded(
                child: Text(
                  widget.title,
                  style: TextStyle(
                    color: _isExpanded
                        ? ColorsManager.blackColor
                        : ColorsManager.lightGrayColor,
                    fontWeight: FontWeight.w400,
                  ),
                ),
              ),
            ],
          ),
        ),
        // Display children if available and expanded
        if (_isExpanded &&
            widget.children != null &&
            widget.children!.isNotEmpty)
          Padding(
            padding: const EdgeInsets.only(left: 48.0), // Indent the children
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: widget.children!,
            ),
          ),
      ],
    );
  }
}