import 'package:auto_size_text/auto_size_text.dart';
import 'package:flutter/material.dart';
import 'package:manager_app/Components/fetch_resource_icon.dart';
import 'package:manager_app/Components/multi_select_container.dart';
import 'package:manager_app/Components/string_input_container.dart';
import 'package:manager_app/app_context.dart';
import 'package:manager_app/constants.dart';
import 'package:managerapi/api.dart';
import 'package:provider/provider.dart';

class ResourceBodyGrid extends StatefulWidget {
  final List<ResourceDTO> resources; //return ResourceDTO
  final Function onSelect;
  final bool isImage;
  const ResourceBodyGrid({
    Key key,
    this.resources,
    this.onSelect,
    this.isImage,
  }) : super(key: key);

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

class _ResourceBodyGridState extends State<ResourceBodyGrid> {
  List<String> filterType;
  String filterSearch = '';
  List<String> selectedTypes;
  List<ResourceDTO> resourcesToShow;

  @override
  void initState() {
    resourcesToShow = widget.resources;
    filterType = [resource_types[0], resource_types[1], resource_types[2], resource_types[3]];
    selectedTypes = resource_types;
    super.initState();
  }

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

    return bodyGrid(resourcesToShow, size, appContext);
  }

  Widget bodyGrid(data, Size size, AppContext appContext)  {
    return Column(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: StringInputContainer(
                label: "Recherche:",
                onChanged: (String value) {
                  setState(() {
                    filterSearch = value;
                    filterResource();
                  });
                },
              ),
            ),
           Padding(
              padding: const EdgeInsets.all(8.0),
              child: MultiSelectContainer(
                label: "Type :",
                initialValue: filterType,
                values: widget.isImage ? resource_types.where((type) => type != "video" && type != "video url").toList(): resource_types,
                isMultiple: true,
                onChanged: (result) {
                  setState(() {
                    selectedTypes = result;
                    filterResource();
                  });
                },
              ),
            ),
            InkWell(
              onTap: () {
                widget.onSelect(ResourceDTO(id: null));
              },
              child: Container(
                height: size.height *0.08,
                width: size.height *0.08,
                decoration: BoxDecoration(
                  color: Colors.lightGreen,
                  shape: BoxShape.rectangle,
                  borderRadius: BorderRadius.circular(25.0),
                  boxShadow: [
                    BoxShadow(
                      color: kSecond,
                      spreadRadius: 0.5,
                      blurRadius: 5,
                      offset: Offset(0, 1.5), // changes position of shadow
                    ),
                  ],
                ),
                child:
                  Padding(
                    padding: const EdgeInsets.all(10.0),
                    child: LayoutBuilder(builder: (context, constraint) {
                     return new Icon(Icons.add, size: constraint.biggest.height, color: kTextLightColor);
                    }),
                  ),
              ),
            )
          ],
        ),
        Expanded(
          child: GridView.builder(
              shrinkWrap: true,
              gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 6),
              itemCount: data.length,
              itemBuilder: (BuildContext context, int index) {
                return
                  InkWell(
                    onTap: () {
                      widget.onSelect(resourcesToShow[index]);
                    },
                    child: Container(
                      decoration: boxDecoration(data[index], appContext),
                      padding: const EdgeInsets.all(15),
                      margin: EdgeInsets.symmetric(vertical: 15, horizontal: 15),
                      child: Align(
                          alignment: Alignment.center,
                          child: getElement(data[index], size, appContext)
                      ),
                    ),
                  );
              }
          ),
        ),
      ],
    );
  }

  getElement(ResourceDTO resource, Size size, AppContext appContext) {
    if (resource.id != null) {
      return Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          SizedBox(
            height: size.width *0.01,
          ),
          Align(
            alignment: Alignment.center,
            child: AutoSizeText(
              resource.label == null ? "" : resource.label,
              style: new TextStyle(fontSize: 20),
              maxLines: 1,
            ),
          ),
          Align(
            alignment: Alignment.bottomRight,
            child: Icon(
              getResourceIcon(resource.type),
              color: kPrimaryColor,
              size: 25,
            ),
          ),
        ],
      );
    } else {
      return Icon(
        Icons.add,
        color: kTextLightColor,
        size: 80.0,
      );
    }
  }

  void filterResource() {
    resourcesToShow = filterSearch.isEmpty ? widget.resources: widget.resources.where((ResourceDTO resource) => resource.label.toUpperCase().contains(filterSearch.toUpperCase())).toList();

    resource_types.forEach((type) {
      switch(type) {
        case "image":
          if (!selectedTypes.contains(type)) {
            resourcesToShow = resourcesToShow.where((resource) => resource.type != ResourceType.image).toList();
          }
          break;
        case "image url":
          if (!selectedTypes.contains(type)) {
            resourcesToShow = resourcesToShow.where((resource) => resource.type != ResourceType.imageUrl).toList();
          }
          break;
        case "video":
          if (!selectedTypes.contains(type)) {
            resourcesToShow = resourcesToShow.where((resource) => resource.type != ResourceType.video).toList();
          }
          break;
        case "video url":
          if (!selectedTypes.contains(type)) {
            resourcesToShow = resourcesToShow.where((resource) => resource.type != ResourceType.videoUrl).toList();
          }
          break;
      }
    });
  }
}

boxDecoration(dynamic resourceDetailDTO, appContext) {
  return BoxDecoration(
    color: resourceDetailDTO.id == null ? Colors.lightGreen : kBackgroundColor,
    shape: BoxShape.rectangle,
    borderRadius: BorderRadius.circular(30.0),
    image: resourceDetailDTO.id != null && resourceDetailDTO.type != ResourceType.videoUrl ? new DecorationImage(
      fit: BoxFit.cover,
      colorFilter: new ColorFilter.mode(Colors.black.withOpacity(0.3), BlendMode.dstATop),
      image: new NetworkImage(
        resourceDetailDTO.type == ResourceType.image ? appContext.getContext().clientAPI.resourceApi.apiClient.basePath+"/api/Resource/"+ resourceDetailDTO.id : resourceDetailDTO.data,
      ),
    ) : null,
    boxShadow: [
      BoxShadow(
        color: kSecond,
        spreadRadius: 0.5,
        blurRadius: 5,
        offset: Offset(0, 1.5), // changes position of shadow
      ),
    ],
  );
}


Future<List<ResourceDTO>> getResources(Function onGetResult, bool isImage, dynamic appContext) async {
  List<ResourceDTO> resources = await appContext.getContext().clientAPI.resourceApi.resourceGet();
  if (onGetResult != null && isImage) {
    resources = resources.where((element) => element.type == ResourceType.image || element.type == ResourceType.imageUrl).toList();
  }
  return resources;
}