import 'package:flutter/material.dart';
import 'package:manager_api_new/api.dart';
import 'package:manager_app/constants.dart';
import 'package:manager_app/Models/managerContext.dart';
import 'package:manager_app/app_context.dart';
import 'package:manager_app/Screens/Resources/select_resource_modal.dart';
import 'package:provider/provider.dart';

class ResourceInputContainer extends StatefulWidget {
  final Color color;
  final String label;
  final String? initialValue;
  final ValueChanged<ResourceDTO> onChanged;
  final BoxFit imageFit;
  final double fontSize;
  final List<ResourceType> inResourceTypes;
  final bool isSmall;
  final bool isLanguageTab;

  const ResourceInputContainer({
    Key? key,
    this.color = kSecond,
    required this.label,
    this.initialValue,
    required this.onChanged,
    this.imageFit = BoxFit.cover,
    this.fontSize = 18,
    this.inResourceTypes = const [ResourceType.Image, ResourceType.ImageUrl],
    this.isSmall = false,
    this.isLanguageTab = false,
  }) : super(key: key);

  @override
  _ResourceInputContainerState createState() => _ResourceInputContainerState();
}

class _ResourceInputContainerState extends State<ResourceInputContainer> {
  String? resourceIdToShow;

  @override
  void initState() {
    resourceIdToShow = widget.initialValue;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final appContext = Provider.of<AppContext>(context);

    if (widget.isLanguageTab) {
      resourceIdToShow = widget.initialValue;
    }

    return FormField<String>(
      initialValue: resourceIdToShow,
      builder: (state) {
        return InputDecorator(
          decoration: InputDecoration(
            labelText: widget.label,
            border: OutlineInputBorder(borderRadius: BorderRadius.circular(8)),
            contentPadding: EdgeInsets.symmetric(horizontal: 25, vertical: 20),
          ),
          child: InkWell(
            onTap: () async {
              ResourceDTO? result = await showSelectResourceModal(
                "Sélectionner une ressource",
                1,
                widget.inResourceTypes,
                context,
                true,
                true,
                true,
              );

              if (result != null) {
                setState(() {
                  resourceIdToShow = result.id;
                });
                widget.onChanged(result);
              }
            },
            child: Container(
              height: widget.isSmall ? 35 : 100,
              width: widget.isSmall ? 60 : double.infinity,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                color: resourceIdToShow == null ? widget.color : Colors.transparent,
                borderRadius: BorderRadius.circular(10),
              ),
              child: resourceIdToShow == null
                  ? Text(
                "Choisir",
                style: TextStyle(color: kWhite, fontSize: widget.fontSize),
                maxLines: 1,
              )
                  : FutureBuilder<ResourceDTO?>(
                future: (appContext.getContext() as ManagerAppContext)
                    .clientAPI!
                    .resourceApi!
                    .resourceGetDetail(resourceIdToShow!),
                builder: (context, snapshot) {
                  if (snapshot.connectionState == ConnectionState.waiting) {
                    return SizedBox(
                      width: 24,
                      height: 24,
                      child: CircularProgressIndicator(strokeWidth: 2),
                    );
                  } else if (snapshot.hasError || snapshot.data == null) {
                    return Text(
                      "Erreur",
                      style: TextStyle(color: kWhite, fontSize: widget.fontSize),
                      maxLines: 1,
                    );
                  } else {
                    return Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        image: DecorationImage(
                          fit: widget.imageFit,
                          image: NetworkImage(snapshot.data!.url!),
                        ),
                      ),
                    );
                  }
                },
              ),
            ),
          ),
        );
      },
    );
  }
}