import '/backend/api_requests/api_calls.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/flutter_flow/flutter_flow_widgets.dart';
import '/shared/lege_lijst_component/lege_lijst_component_widget.dart';
import 'dart:ui';
import 'package:easy_debounce/easy_debounce.dart';
import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:provider/provider.dart';
import 'fotoboek_grid_component_model.dart';
export 'fotoboek_grid_component_model.dart';

class FotoboekGridComponentWidget extends StatefulWidget {
  const FotoboekGridComponentWidget({
    super.key,
    this.parameter1,
    this.parameter2,
    this.parameter3,
    this.parameter4,
    required this.bijKeuze,
  });

  final dynamic parameter1;
  final dynamic parameter2;
  final dynamic parameter3;
  final List<dynamic>? parameter4;
  final Future Function(String fid, String url)? bijKeuze;

  @override
  State<FotoboekGridComponentWidget> createState() =>
      _FotoboekGridComponentWidgetState();
}

class _FotoboekGridComponentWidgetState
    extends State<FotoboekGridComponentWidget> with RouteAware {
  late FotoboekGridComponentModel _model;

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

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

    _model.textController ??= TextEditingController()
      ..addListener(() {
        debugLogWidgetClass(_model);
      });
    _model.textFieldFocusNode ??= FocusNode();
  }

  @override
  void dispose() {
    routeObserver.unsubscribe(this);

    _model.maybeDispose();

    super.dispose();
  }

  @override
  void didUpdateWidget(FotoboekGridComponentWidget oldWidget) {
    super.didUpdateWidget(oldWidget);
    _model.widget = widget;
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    final route = DebugModalRoute.of(context);
    if (route != null) {
      routeObserver.subscribe(this, route);
    }
    debugLogGlobalProperty(context);
  }

  @override
  void didPopNext() {
    if (mounted && DebugFlutterFlowModelContext.maybeOf(context) == null) {
      setState(() => _model.isRouteVisible = true);
      debugLogWidgetClass(_model);
    }
  }

  @override
  void didPush() {
    if (mounted && DebugFlutterFlowModelContext.maybeOf(context) == null) {
      setState(() => _model.isRouteVisible = true);
      debugLogWidgetClass(_model);
    }
  }

  @override
  void didPop() {
    _model.isRouteVisible = false;
  }

  @override
  void didPushNext() {
    _model.isRouteVisible = false;
  }

  @override
  Widget build(BuildContext context) {
    DebugFlutterFlowModelContext.maybeOf(context)
        ?.parentModelCallback
        ?.call(_model);
    context.watch<FFAppState>();

    return Column(
      mainAxisSize: MainAxisSize.max,
      children: [
        Expanded(
          child: FutureBuilder<ApiCallResponse>(
            future: MijnFotosCall.call(
              sessionName: FFAppState().userSessionname,
              sessid: FFAppState().userSessionid,
              zoek: _model.zoekterm,
            ),
            builder: (context, snapshot) {
              // Customize what your widget looks like when it's loading.
              if (!snapshot.hasData) {
                return Center(
                  child: SizedBox(
                    width: 80.0,
                    height: 80.0,
                    child: SpinKitFadingCircle(
                      color: FlutterFlowTheme.of(context).primary,
                      size: 80.0,
                    ),
                  ),
                );
              }
              final gridViewMijnFotosResponse = snapshot.data!;
              _model.debugBackendQueries[
                      'MijnFotosCall_statusCode_GridView_inry4ta6'] =
                  debugSerializeParam(
                gridViewMijnFotosResponse.statusCode,
                ParamType.int,
                link:
                    'https://app.flutterflow.io/project/uitgaanskrant-1qhvtd?tab=uiBuilder&page=FotoboekGridComponent',
                name: 'int',
                nullable: false,
              );
              _model.debugBackendQueries[
                      'MijnFotosCall_responseBody_GridView_inry4ta6'] =
                  debugSerializeParam(
                gridViewMijnFotosResponse.bodyText,
                ParamType.String,
                link:
                    'https://app.flutterflow.io/project/uitgaanskrant-1qhvtd?tab=uiBuilder&page=FotoboekGridComponent',
                name: 'String',
                nullable: false,
              );
              debugLogWidgetClass(_model);

              return Builder(
                builder: (context) {
                  final fotoboekItem = MijnFotosCall.items(
                        gridViewMijnFotosResponse.jsonBody,
                      )?.toList() ??
                      [];
                  if (fotoboekItem.isEmpty) {
                    return Center(
                      child: LegeLijstComponentWidget(
                        tekst:
                            'Je hebt nog geen foto\'s. Upload er een met Logo kiezen.',
                      ),
                    );
                  }
                  _model.debugGeneratorVariables[
                          'fotoboekItem${fotoboekItem.length > 100 ? ' (first 100)' : ''}'] =
                      debugSerializeParam(
                    fotoboekItem.take(100),
                    ParamType.JSON,
                    isList: true,
                    link:
                        'https://app.flutterflow.io/project/uitgaanskrant-1qhvtd?tab=uiBuilder&page=FotoboekGridComponent',
                    name: 'dynamic',
                    nullable: false,
                  );
                  debugLogWidgetClass(_model);

                  return GridView.builder(
                    padding: EdgeInsets.zero,
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 3,
                      crossAxisSpacing: 10.0,
                      mainAxisSpacing: 10.0,
                      childAspectRatio: 1.0,
                    ),
                    scrollDirection: Axis.vertical,
                    itemCount: fotoboekItem.length,
                    itemBuilder: (context, fotoboekItemIndex) {
                      final fotoboekItemItem = fotoboekItem[fotoboekItemIndex];
                      return InkWell(
                        splashColor: Colors.transparent,
                        focusColor: Colors.transparent,
                        hoverColor: Colors.transparent,
                        highlightColor: Colors.transparent,
                        onTap: () async {
                          await widget.bijKeuze?.call(
                            getJsonField(
                              fotoboekItemItem,
                              r'''$.fid''',
                            ).toString(),
                            getJsonField(
                              fotoboekItemItem,
                              r'''$.url''',
                            ).toString(),
                          );
                          Navigator.pop(context);
                        },
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(8.0),
                          child: Image.network(
                            getJsonField(
                              fotoboekItemItem,
                              r'''$.thumb''',
                            ).toString(),
                            width: double.infinity,
                            height: double.infinity,
                            fit: BoxFit.cover,
                          ),
                        ),
                      );
                    },
                  );
                },
              );
            },
          ),
        ),
        Container(
          width: double.infinity,
          child: TextFormField(
            controller: _model.textController,
            focusNode: _model.textFieldFocusNode,
            onChanged: (_) => EasyDebounce.debounce(
              '_model.textController',
              Duration(milliseconds: 2000),
              () async {
                _model.zoekterm = _model.textController.text;
                safeSetState(() {});
              },
            ),
            autofocus: false,
            enabled: true,
            obscureText: false,
            decoration: InputDecoration(
              isDense: true,
              labelStyle: FlutterFlowTheme.of(context).labelMedium.override(
                    font: GoogleFonts.roboto(
                      fontWeight:
                          FlutterFlowTheme.of(context).labelMedium.fontWeight,
                      fontStyle:
                          FlutterFlowTheme.of(context).labelMedium.fontStyle,
                    ),
                    letterSpacing: 0.0,
                    fontWeight:
                        FlutterFlowTheme.of(context).labelMedium.fontWeight,
                    fontStyle:
                        FlutterFlowTheme.of(context).labelMedium.fontStyle,
                  ),
              hintText: FFLocalizations.of(context).getText(
                'p5wf8u4i' /* TextField */,
              ),
              hintStyle: FlutterFlowTheme.of(context).labelMedium.override(
                    font: GoogleFonts.roboto(
                      fontWeight:
                          FlutterFlowTheme.of(context).labelMedium.fontWeight,
                      fontStyle:
                          FlutterFlowTheme.of(context).labelMedium.fontStyle,
                    ),
                    letterSpacing: 0.0,
                    fontWeight:
                        FlutterFlowTheme.of(context).labelMedium.fontWeight,
                    fontStyle:
                        FlutterFlowTheme.of(context).labelMedium.fontStyle,
                  ),
              enabledBorder: OutlineInputBorder(
                borderSide: BorderSide(
                  color: Color(0x00000000),
                  width: 1.0,
                ),
                borderRadius: BorderRadius.circular(8.0),
              ),
              focusedBorder: OutlineInputBorder(
                borderSide: BorderSide(
                  color: Color(0x00000000),
                  width: 1.0,
                ),
                borderRadius: BorderRadius.circular(8.0),
              ),
              errorBorder: OutlineInputBorder(
                borderSide: BorderSide(
                  color: FlutterFlowTheme.of(context).error,
                  width: 1.0,
                ),
                borderRadius: BorderRadius.circular(8.0),
              ),
              focusedErrorBorder: OutlineInputBorder(
                borderSide: BorderSide(
                  color: FlutterFlowTheme.of(context).error,
                  width: 1.0,
                ),
                borderRadius: BorderRadius.circular(8.0),
              ),
              filled: true,
              fillColor: FlutterFlowTheme.of(context).secondaryBackground,
            ),
            style: FlutterFlowTheme.of(context).bodyMedium.override(
                  font: GoogleFonts.roboto(
                    fontWeight:
                        FlutterFlowTheme.of(context).bodyMedium.fontWeight,
                    fontStyle:
                        FlutterFlowTheme.of(context).bodyMedium.fontStyle,
                  ),
                  letterSpacing: 0.0,
                  fontWeight:
                      FlutterFlowTheme.of(context).bodyMedium.fontWeight,
                  fontStyle: FlutterFlowTheme.of(context).bodyMedium.fontStyle,
                ),
            cursorColor: FlutterFlowTheme.of(context).primaryText,
            enableInteractiveSelection: true,
            validator: _model.textControllerValidator.asValidator(context),
          ),
        ),
      ],
    );
  }
}