import 'package:diplomaticquarterapp/config/size_config.dart';
import 'package:expandable/expandable.dart';
import 'package:flutter/material.dart';

/// App Expandable Notifier with animation
/// [headerWidget]  widget want to show in the header
/// [bodyWidget]  widget want to show in the body
/// [title]  the widget title
/// [collapsed] The widget shown in the collapsed state
class AppExpandableNotifier extends StatefulWidget {
  final Widget headerWidget;
  final Widget bodyWidget;
  final String title;
  final Widget collapsed;
  final bool isExpand;
  bool expandFlag = false;
  var controller = new ExpandableController();
  AppExpandableNotifier(
      {this.headerWidget,
      this.bodyWidget,
      this.title,
      this.collapsed,
      this.isExpand});

  _AppExpandableNotifier createState() => _AppExpandableNotifier();
}

class _AppExpandableNotifier extends State<AppExpandableNotifier> {
  @override
  Widget build(BuildContext context) {
    setState(() {
      if (widget.isExpand == true) {
        widget.expandFlag = widget.isExpand;
        widget.controller.expanded = true;
      }
    });
    return ExpandableNotifier(
      child: Padding(
        padding: const EdgeInsets.only(left: 10, right: 10, top: 4),
        child: Card(
          clipBehavior: Clip.antiAlias,
          child: Column(
            children: <Widget>[
              SizedBox(
                child: widget.headerWidget,
              ),
              ScrollOnExpand(
                scrollOnExpand: true,
                scrollOnCollapse: false,
                child: ExpandablePanel(
                  hasIcon: false,
                  theme: const ExpandableThemeData(
                    headerAlignment: ExpandablePanelHeaderAlignment.center,
                    tapBodyToCollapse: true,
                  ),
                  header: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Padding(
                          padding: EdgeInsets.all(10),
                          child: Text(
                            widget.title ?? 'Details',
                            style: TextStyle(
                              fontWeight: FontWeight.bold,
                              fontSize: SizeConfig.textMultiplier * 2,
                            ),
                          ),
                        ),
                        new IconButton(
                            icon: new Container(
                              height: 28.0,
                              width: 30.0,
                              decoration: new BoxDecoration(
                                color: Color(0xFF40ACC9),
                                shape: BoxShape.circle,
                              ),
                              child: new Center(
                                child: new Icon(
                                  widget.expandFlag
                                      ? Icons.keyboard_arrow_up
                                      : Icons.keyboard_arrow_down,
                                  color: Colors.white,
                                  size: 30.0,
                                ),
                              ),
                            ),
                            onPressed: () {
                              setState(() {
                                widget.expandFlag = !widget.expandFlag;
                                if (widget.expandFlag == true) {
                                  widget.controller.expanded = true;
                                } else {
                                  widget.controller.expanded = false;
                                }
                              });
                            }),
                      ]),
                  collapsed: widget.collapsed ?? Container(),
                  expanded: widget.bodyWidget,
                  builder: (_, collapsed, expanded) {
                    return Padding(
                      padding: EdgeInsets.only(left: 5, right: 5, bottom: 5),
                      child: Expandable(
                        controller: widget.controller,
                        collapsed: collapsed,
                        expanded: expanded,
                        theme: const ExpandableThemeData(crossFadePoint: 0),
                      ),
                    );
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}