import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:lamiter/Component/tap_container.dart';
import 'package:lamiter/Extension/build_context.dart';

class ToggleInfoLayout extends StatefulWidget {
  final String title;
  final Color? color;
  final Widget infoWidget;
  final Widget? shareWidget;
  final bool initToggle;
  final bool fullFit;

  const ToggleInfoLayout({
    super.key,
    required this.title,
    this.color,
    required this.infoWidget,
    this.shareWidget,
    this.initToggle = false,
    this.fullFit = false,
  });

  @override
  State<ToggleInfoLayout> createState() => _ToggleInfoLayoutState();
}

class _ToggleInfoLayoutState extends State<ToggleInfoLayout>
    with AutomaticKeepAliveClientMixin {
  late bool _toggle;

  @override
  void initState() {
    super.initState();
    _toggle = widget.initToggle;
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Container(
      decoration: BoxDecoration(
        color: _toggle
            ? Colors.transparent
            : widget.color ?? context.inverseSurface,
        border: Border.all(
            color: widget.color ?? context.inverseSurface, width: 0.5.sp),
        borderRadius: BorderRadius.all(
          Radius.circular(10.sp),
        ),
      ),
      child: Column(
        children: [
          TapContainer(
            onTap: () {
              _toggle = !_toggle;
              setState(() {});
            },
            child: Container(
              width: context.width(1),
              padding: EdgeInsets.symmetric(vertical: 16.sp, horizontal: 16.sp),
              decoration: BoxDecoration(
                color: widget.color ?? context.inverseSurface,
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(10.sp),
                  topRight: Radius.circular(10.sp),
                  bottomLeft: Radius.circular(_toggle ? 0 : 10.sp),
                  bottomRight: Radius.circular(_toggle ? 0 : 10.sp),
                ),
              ),
              child: Row(
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    widget.title,
                    style: context.tM!.copyWith(
                      color: context.getInverseColor(
                        widget.color ?? context.inverseSurface,
                      ),
                      fontWeight: FontWeight.bold,
                      letterSpacing: 1.21.sp,
                    ),
                  ),
                  Row(
                    children: [
                      widget.shareWidget ?? const SizedBox.shrink(),
                      Icon(
                        _toggle ? Icons.remove : Icons.add,
                        color: context.getInverseColor(
                            widget.color ?? context.inverseSurface),
                      ),
                    ],
                  )
                ],
              ),
            ),
          ),
          _toggle
              ? Container(
                  padding: EdgeInsets.symmetric(
                    vertical: widget.fullFit ? 0 : 18.sp,
                    horizontal: widget.fullFit ? 0 : 18.sp,
                  ),
                  child: widget.infoWidget,
                )
              : const SizedBox.shrink(),
        ],
      ),
    );
  }

  @override
  bool get wantKeepAlive => true;
}