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

import '../../Constants.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 = false});

  _AppExpandableNotifier createState() => _AppExpandableNotifier();
}

class _AppExpandableNotifier extends State<AppExpandableNotifier> {

  @override
  void initState() {
    setState(() {
      if (widget.isExpand) {
        widget.expandFlag = widget.isExpand;
        widget.controller.expanded = true;
      }
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {

    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: [
                        Expanded(
                          child: Padding(
                            padding: EdgeInsets.all(10),
                            child: Text(
                              widget.title ?? TranslationBase.of(context).details,
                              style: TextStyle(
                                fontWeight: FontWeight.bold,
                                fontSize: SizeConfig.textMultiplier * 2,
                              ),
                            ),
                          ),
                        ),
                         IconButton(
                            icon: new Container(
                              height: 28.0,
                              width: 30.0,
                              decoration: new BoxDecoration(
                                color: secondaryColor,
                                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;
                                widget.controller.expanded = widget.expandFlag;
                              });
                            }),
                      ]),
                  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),
                      ),
                    );
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}