import 'dart:collection';

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:hub/components/templates_components/details_component/details_component_model.dart';
import 'package:hub/flutter_flow/flutter_flow_theme.dart';
import 'package:hub/flutter_flow/flutter_flow_util.dart';
import 'package:hub/shared/utils/limited_text_size.dart';

class DetailsComponentWidget extends StatefulWidget {
  const DetailsComponentWidget({
    Key? key,
    required this.labelsHashMap,
    required this.statusHashMap,
    this.imagePath,
    this.onTapCardItemAction,
    required this.buttons,
  });

  final Map<String, String> labelsHashMap;
  final List<Map<String, Color>?> statusHashMap;
  final String? imagePath;
  final Future Function()? onTapCardItemAction;
  final List<Widget>? buttons;

  @override
  State<DetailsComponentWidget> createState() => _DetailsComponentWidgetState();
}

class _DetailsComponentWidgetState extends State<DetailsComponentWidget> {
  late DetailsComponentModel _model;

  LinkedHashMap<String, String> get labelsLinkedHashMap =>
      LinkedHashMap.from(widget.labelsHashMap);

  List<LinkedHashMap<String, Color>> get statusLinkedHashMap =>
      widget.statusHashMap
          .map((map) => LinkedHashMap<String, Color>.from(map ?? {}))
          .toList();

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

  @override
  void initState() {
    super.initState();
    _model = createModel(context, () => DetailsComponentModel());
    _model.textFieldFocusNodeStatus ??= FocusNode();
  }

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

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // CachedNetworkImage.evictFromCache(widget.imagePath ?? '');
    final double limitedBodyFontSize =
        LimitedFontSizeUtil.getBodyFontSize(context);
    return Container(
      constraints: BoxConstraints(
        maxWidth: MediaQuery.of(context).size.width,
        maxHeight: MediaQuery.of(context).size.height,
      ),
      decoration: BoxDecoration(
        color: FlutterFlowTheme.of(context).primaryBackground,
        borderRadius: const BorderRadius.all(Radius.circular(25.0)),
      ),
      child: SingleChildScrollView(
        child: Column(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            SizedBox(height: MediaQuery.of(context).size.height * 0.02),
            if (widget.imagePath != null && widget.imagePath != '')
              Container(
                width: MediaQuery.of(context).size.width * 0.3,
                height: MediaQuery.of(context).size.width * 0.3,
                clipBehavior: Clip.antiAlias,
                decoration: const BoxDecoration(
                  shape: BoxShape.circle,
                ),
                child: CachedNetworkImage(
                  fadeInDuration: const Duration(milliseconds: 100),
                  fadeOutDuration: const Duration(milliseconds: 100),
                  imageUrl: widget.imagePath!,
                  fit: BoxFit.cover,
                  useOldImageOnUrlChange: true,
                ),
              ),
            SizedBox(height: MediaQuery.of(context).size.height * 0.03),
            Row(
              children: statusLinkedHashMap.expand((linkedHashMap) {
                return linkedHashMap.entries
                    .map((MapEntry<String, Color> item) {
                  return Expanded(
                    child: Padding(
                      padding: EdgeInsets.symmetric(
                        horizontal: MediaQuery.of(context).size.width * 0.05,
                      ),
                      child: TextFormField(
                        autofocus: false,
                        canRequestFocus: false,
                        readOnly: true,
                        obscureText: false,
                        decoration: InputDecoration(
                          isDense: true,
                          enabledBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(10.0),
                            borderSide: BorderSide(
                              color: item.value,
                            ),
                          ),
                          filled: true,
                          fillColor: item.value,
                          labelText: item.key,
                          labelStyle: FlutterFlowTheme.of(context)
                              .labelMedium
                              .override(
                                fontFamily: FlutterFlowTheme.of(context)
                                    .labelMediumFamily,
                                fontWeight: FontWeight.bold,
                                color: FlutterFlowTheme.of(context).info,
                                letterSpacing: 0.0,
                                useGoogleFonts: GoogleFonts.asMap().containsKey(
                                  FlutterFlowTheme.of(context)
                                      .labelMediumFamily,
                                ),
                                fontSize: limitedBodyFontSize,
                              ),
                          hintStyle: FlutterFlowTheme.of(context)
                              .labelMedium
                              .override(
                                fontFamily: FlutterFlowTheme.of(context)
                                    .labelMediumFamily,
                                color: FlutterFlowTheme.of(context).info,
                                letterSpacing: 0.0,
                                useGoogleFonts: GoogleFonts.asMap().containsKey(
                                  FlutterFlowTheme.of(context)
                                      .labelMediumFamily,
                                ),
                                fontSize: limitedBodyFontSize,
                              ),
                          focusedBorder: InputBorder.none,
                          errorBorder: InputBorder.none,
                          focusedErrorBorder: InputBorder.none,
                          suffixIcon: Icon(
                            Icons.info,
                            color: FlutterFlowTheme.of(context).info,
                          ),
                        ),
                        style: FlutterFlowTheme.of(context).bodyMedium.override(
                              fontFamily:
                                  FlutterFlowTheme.of(context).bodyMediumFamily,
                              color: FlutterFlowTheme.of(context).info,
                              letterSpacing: 0.0,
                              useGoogleFonts: GoogleFonts.asMap().containsKey(
                                FlutterFlowTheme.of(context).bodyMediumFamily,
                              ),
                              fontSize: limitedBodyFontSize,
                            ),
                        textAlign: TextAlign.center,
                        maxLines: null,
                        keyboardType: TextInputType.name,
                        validator: _model.textController1Validator
                            .asValidator(context),
                      ),
                    ),
                  );
                }).toList();
              }).toList(),
            ),
            SizedBox(height: MediaQuery.of(context).size.height * 0.03),
            ListView.builder(
              shrinkWrap: true,
              itemCount: labelsLinkedHashMap.length,
              physics: const NeverScrollableScrollPhysics(),
              itemBuilder: (context, index) {
                String key = labelsLinkedHashMap.keys.elementAt(index);
                String value = labelsLinkedHashMap[key]!;
                // return Text('key: $key, value: $value');
                return TextFormField(
                  readOnly: true,
                  initialValue: '$value',
                  style: FlutterFlowTheme.of(context).bodyMedium.override(
                        fontFamily:
                            FlutterFlowTheme.of(context).bodyMediumFamily,
                        color: FlutterFlowTheme.of(context).primaryText,
                        letterSpacing: 0.0,
                        useGoogleFonts: GoogleFonts.asMap().containsKey(
                          FlutterFlowTheme.of(context).bodyMediumFamily,
                        ),
                        fontSize: limitedBodyFontSize,
                      ),
                  decoration: InputDecoration(
                    labelText: key,
                    filled: true,
                    fillColor: FlutterFlowTheme.of(context).primaryBackground,
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(10.0),
                      borderSide: BorderSide(
                        color: FlutterFlowTheme.of(context)
                            .primaryBackground, // Change border color here
                      ),
                    ),
                    labelStyle: FlutterFlowTheme.of(context)
                        .labelMedium
                        .override(
                          fontFamily:
                              FlutterFlowTheme.of(context).labelMediumFamily,
                          color: FlutterFlowTheme.of(context).primaryText,
                          letterSpacing: 0.0,
                          useGoogleFonts: GoogleFonts.asMap().containsKey(
                            FlutterFlowTheme.of(context).labelMediumFamily,
                          ),
                        ),
                    hintStyle: FlutterFlowTheme.of(context)
                        .labelMedium
                        .override(
                          fontFamily:
                              FlutterFlowTheme.of(context).labelMediumFamily,
                          color: FlutterFlowTheme.of(context).primaryText,
                          letterSpacing: 0.0,
                          useGoogleFonts: GoogleFonts.asMap().containsKey(
                            FlutterFlowTheme.of(context).labelMediumFamily,
                          ),
                        ),
                    enabledBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(10.0),
                      borderSide: BorderSide(
                        color: FlutterFlowTheme.of(context)
                            .primaryBackground, // Change border color here
                      ),
                    ),
                    focusedBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(10.0),
                      borderSide: BorderSide(
                        color: FlutterFlowTheme.of(context)
                            .primaryBackground, // Change border color here
                      ),
                    ),
                    errorBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(10.0),
                      borderSide: BorderSide(
                        color: FlutterFlowTheme.of(context)
                            .primaryBackground, // Change border color here
                      ),
                    ),
                    focusedErrorBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(10.0),
                      borderSide: BorderSide(
                        color: FlutterFlowTheme.of(context)
                            .primaryBackground, // Change border color here
                      ),
                    ),
                  ),
                );
              },
            ),
            SizedBox(height: MediaQuery.of(context).size.height * 0.02),
            if (widget.buttons!.isNotEmpty || widget.buttons != null)
              OverflowBar(
                overflowAlignment: OverflowBarAlignment.center,
                alignment: MainAxisAlignment.center,
                overflowSpacing: 2,
                spacing: 2,
                // mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: widget.buttons!,
              ),
            SizedBox(height: MediaQuery.of(context).size.height * 0.02),
          ],
        ),
      ),
    );
  }
}
