import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_expandable_fab/flutter_expandable_fab.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:hub/backend/schema/enums/enums.dart';
import 'package:hub/components/molecular_components/menu_item/menu_item.dart';
import 'package:hub/components/organism_components/menu_staggered_view_component/menu_staggered_view_component_model.dart';
import 'package:hub/flutter_flow/custom_icons.dart';
import 'package:hub/flutter_flow/flutter_flow_icon_button.dart';
import 'package:hub/flutter_flow/flutter_flow_model.dart';
import 'package:hub/flutter_flow/flutter_flow_theme.dart';
import 'package:hub/flutter_flow/flutter_flow_util.dart';
import 'package:hub/flutter_flow/internationalization.dart';


class MenuStaggeredViewComponentWidget extends StatefulWidget {
  const MenuStaggeredViewComponentWidget({
    super.key,
    required this.changeMenuStyle,
    required this.expandable,
    required this.item,
    required this.options,
  });

  final bool expandable;
  final MenuItem item;

  final List<MenuEntry> options;
  final Future Function()? changeMenuStyle;

  @override
  State<MenuStaggeredViewComponentWidget> createState() =>
      _MenuStaggeredViewComponentWidgetState();
}

class _MenuStaggeredViewComponentWidgetState
    extends State<MenuStaggeredViewComponentWidget> {
  late MenuStaggeredViewComponentModel _model;

  @override
  void setState(VoidCallback callback) {
    super.setState(callback);
    _model.onUpdate();
  }

  @override
  void initState() {
    super.initState();
    _model = createModel(context, () => MenuStaggeredViewComponentModel());
  }

  @override
  void dispose() {
    _model.maybeDispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 0.0,
      runSpacing: 0.0,
      alignment: WrapAlignment.start,
      crossAxisAlignment: WrapCrossAlignment.start,
      direction: Axis.horizontal,
      runAlignment: WrapAlignment.start,
      verticalDirection: VerticalDirection.down,
      clipBehavior: Clip.none,
      children: [
        Container(
          width: double.infinity,
          height: MediaQuery.sizeOf(context).height * 0.498,
          decoration: const BoxDecoration(),
          child: Padding(
            padding: const EdgeInsets.all(14.0),
            child: MasonryGridView.builder(
              physics: const NeverScrollableScrollPhysics(),
              gridDelegate:
                  const SliverSimpleGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
              ),
              crossAxisSpacing: 10.0,
              mainAxisSpacing: 10.0,
              itemCount: widget.options.length,
              padding: const EdgeInsets.fromLTRB(
                0,
                10.0,
                0,
                10.0,
              ),
              shrinkWrap: true,
              itemBuilder: (context, index) {
                return SizedBox(
                  height: 100,
                  width: 100,
                  child: widget.options[index]);
              },
            ),
          ),
        ),
        Align(
          alignment: const AlignmentDirectional(0.0, 0.0),
          child: Container(
            decoration: const BoxDecoration(
              borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(0.0),
                bottomRight: Radius.circular(0.0),
                topLeft: Radius.circular(0.0),
                topRight: Radius.circular(0.0),
              ),
            ),
            alignment: const AlignmentDirectional(0.0, 0.0),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.max,
              children: [
                Text(
                  FFLocalizations.of(context).getVariableText(
                    enText: 'Minimize',
                    ptText: 'Minimizar',
                  ),
                  style: FlutterFlowTheme.of(context).title1.override(
                    fontFamily: 'Nunito',
                    color: FlutterFlowTheme.of(context).primaryText,
                    fontSize: 12.0,
                    fontWeight: FontWeight.w600,
                    fontStyle: FontStyle.normal,
                  ),
                ),
                Align(
                  alignment: const AlignmentDirectional(0.0, 0.0),
                  child: FlutterFlowIconButton(
                    borderColor: Colors.transparent,
                    borderRadius: 20.0,
                    borderWidth: 1.0,
                    buttonSize: 50.0,
                    fillColor: const Color(0x00FFFFFF),
                    icon: Icon(
                      Icons.keyboard_arrow_up_sharp,
                      color: FlutterFlowTheme.of(context).primary,
                    ),
                    onPressed: () async {
                      await widget.changeMenuStyle?.call();
                    },
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}