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

class ImageInputContainer extends StatefulWidget {
  final Color color;
  final String label;
  final String? initialValue;
  final ValueChanged<ResourceDTO> onChanged;
  final BoxFit imageFit;
  final bool isSmall;
  final double fontSize;
  const ImageInputContainer({
    Key? key,
    this.color = kSecond,
    required this.label,
    this.initialValue,
    required this.onChanged,
    this.imageFit = BoxFit.cover,
    this.isSmall = false,
    this.fontSize = 25
  }) : super(key: key);

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

class _ImageInputContainerState extends State<ImageInputContainer> {
  String? resourceIdToShow;

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

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Container(
      child: Row(
        children: [
          Align(
              alignment: AlignmentDirectional.centerStart,
              child: AutoSizeText(
                widget.label,
                style: TextStyle(fontSize: widget.fontSize, fontWeight: FontWeight.w300),
                maxLines: 2,
                maxFontSize: widget.fontSize,
                textAlign: TextAlign.center,
              )
          ),
          Container(
            //color: widget.isSmall ? Colors.cyanAccent: Colors.red,
            child: Padding(
              padding: EdgeInsets.only(left: widget.isSmall ? 5 : 10, top: 10, bottom: 10),
              child: Container(
                width: 90,
                height: 90,
                child: InkWell(
                  onTap: () async {
                    ResourceDTO? result = await showSelectResourceModal(
                      "Sélectionner une ressource",
                      1,
                      [ResourceType.Image, ResourceType.ImageUrl],
                      context
                    );

                    if (result != null) {
                      setState(() {
                        resourceIdToShow = result.id != null ? result.id : null;
                      });
                      widget.onChanged(result);
                    }
                  },
                  child: getElement(widget.initialValue, context, widget.isSmall),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  getElement(String? initialValue, BuildContext context, bool isSmall) {
    if (resourceIdToShow != null) {
      Size size = MediaQuery.of(context).size;
      final appContext = Provider.of<AppContext>(context);
      return FutureBuilder(
          future: getResource(resourceIdToShow!, appContext),
          builder: (context, AsyncSnapshot<dynamic> snapshot) {
            if (snapshot.connectionState == ConnectionState.done) {
              if (snapshot.data != null) {
                return Container(
                  decoration: boxDecoration(snapshot.data, appContext),
                );
              } else {
                return Center(
                    child: Container(
                      decoration: boxDecoration(null, appContext),
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text("Aucune image"),
                      )
                    )
                );
              }

            } else if (snapshot.connectionState == ConnectionState.none) {
              return Text("No data");
            } else {
              return Center(
                  child: Container(
                      height: size.height * 0.1,
                      child: LoadingCommon()
                  )
              );
            }
          }
      );
    } else {
      return Container(
            decoration: BoxDecoration(
              color: widget.color,
              borderRadius: BorderRadius.circular(20),
            ),
            child: Padding(
              padding: const EdgeInsets.only(left: 5, right: 5, top: 15, bottom: 15),
              child: Center(
                  child: AutoSizeText(
                    "Choisir une image",
                    style: TextStyle(color: kWhite),
                    maxLines: 1,
                  )
              ),
            )
        );
    }
  }

  Future<ResourceDTO?> getResource(String resourceIdToShow, dynamic appContext) async {
    ResourceDTO? resource = await (appContext.getContext() as ManagerAppContext).clientAPI!.resourceApi!.resourceGetDetail(resourceIdToShow);
    return resource;
  }

  boxDecoration(ResourceDTO? resourceDTO, AppContext appContext) {
    return BoxDecoration(
      shape: BoxShape.rectangle,
      color: kWhite,
      borderRadius: BorderRadius.circular(30.0),
      image: resourceDTO != null ? resourceDTO.type != null ? new DecorationImage(
        fit: widget.imageFit,
        image: new NetworkImage(
          resourceDTO.url!, // TODO handle multiple type of content
        ),
      ) : null : null,
      boxShadow: [
        BoxShadow(
          spreadRadius: 0.5,
          blurRadius: 1,
          offset: Offset(0, 1.5), // changes position of shadow
        ),
      ],
    );
  }
}