import 'package:fis_theme/theme.dart';
import 'package:fis_ui/index.dart';
import 'package:fis_ui/interface/interactive_container.dart';
import 'package:flutter/material.dart';
import 'package:flyinsono/architecture/define.dart';

class FExpandableButton extends FStatefulWidget
    implements FInteractiveContainer {
  final Map<String, void Function()?> options;
  final Function(String)? onTap;
  const FExpandableButton({Key? key, required this.options, this.onTap})
      : super(key: key);

  @override
  _FExpandableButtonState createState() => _FExpandableButtonState();

  @override
  String get pageName => "ExpandableButton";
}

class _FExpandableButtonState extends FState<FExpandableButton>
    with SingleTickerProviderStateMixin {
  late final AnimationController _controller = AnimationController(
    vsync: this,
    duration: const Duration(milliseconds: 300),
  );

  @override
  FWidget build(BuildContext context) {
    return FColumn(
      mainAxisSize: MainAxisSize.min,
      children: [
        FContainer(
          alignment: Alignment.topRight,
          child: FIconButton(
            color: FTheme.ins.colorScheme.primary,
            icon: FIcon(Icons.more_horiz),
            onPressed: () {
              if (_controller.isDismissed) {
                _controller.forward();
              } else {
                _controller.reverse();
              }
            },
            businessParent: widget,
            name: 'more_horiz',
          ),
        ),
        QuickFWidget(
          SizeTransition(
            axisAlignment: 1.0,
            sizeFactor: _controller,
            child: FColumn(
              children: widget.options.keys
                  .map(
                    (option) => FGestureDetector(
                      onTap: () {
                        widget.options[option]?.call();
                        _controller.reverse();
                      },
                      name: option,
                      businessParent: this.widget,
                      child: FContainer(
                        margin: EdgeInsets.only(right: 15),
                        width: 120,
                        height: 40,
                        child: FContainer(
                          alignment: Alignment.center,
                          decoration: BoxDecoration(
                              color: FTheme.ins.colorScheme.primary,
                              borderRadius:
                                  BorderRadius.all(Radius.circular(8))),
                          child: FText(
                            option,
                            textAlign: TextAlign.center,
                            style: const TextStyle(
                              fontSize: 16,
                              color: Colors.white,
                            ),
                          ),
                        ),
                      ),
                    ),
                  )
                  .toList(),
            ),
          ),
        ),
      ],
    );
  }

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