import 'package:auto_size_text/auto_size_text.dart';
import 'package:flutter/material.dart';
import 'package:manager_app/Components/fetch_section_icon.dart';
import 'package:manager_app/Components/image_input_container.dart';
import 'package:manager_app/Components/multi_select_container.dart';
import 'package:manager_app/Components/slider_input_container.dart';
import 'package:manager_app/Screens/Configurations/Section/SubSection/Map/showNewOrUpdateGeoPoint.dart';
import 'package:manager_app/app_context.dart';
import 'package:manager_app/constants.dart';
import 'package:managerapi/api.dart';
import 'dart:convert';

import 'package:provider/provider.dart';

class MapConfig extends StatefulWidget {
  final String color;
  final String label;
  final String initialValue;
  final ValueChanged<String> onChanged;
  const MapConfig({
    Key key,
    this.color,
    this.label,
    this.initialValue,
    this.onChanged,
  }) : super(key: key);

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

class _MapConfigState extends State<MapConfig> {
  MapDTO mapDTO;

  @override
  void initState() {
    super.initState();
    mapDTO = MapDTO.fromJson(json.decode(widget.initialValue));
    List<GeoPointDTO> test = new List<GeoPointDTO>.from(mapDTO.points);
    mapDTO.points = test;

    if (mapDTO.mapType == null) {
      mapDTO.mapType = MapTypeApp.hybrid;
    }
  }

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

    return
      SingleChildScrollView(
        child: Column(
          children: [
            Container(
              height: size.height * 0.15,
              width: double.infinity,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  // Icon
                  ImageInputContainer(
                    label: "Icône:",
                    initialValue: mapDTO.iconResourceId,
                    color: kPrimaryColor,
                    imageFit: BoxFit.contain,
                    onChanged: (ResourceDTO resource) {
                      mapDTO.iconSource = resource.type == ResourceType.imageUrl ? resource.data : appContext.getContext().clientAPI.resourceApi.apiClient.basePath+"/api/Resource/"+ resource.id;
                      mapDTO.iconResourceId = resource.id;
                      widget.onChanged(jsonEncode(mapDTO).toString());
                    },
                    isSmall: true
                  ),
                  // Map Type
                  MultiSelectContainer(
                    label: "Type :",
                    initialValue: [mapDTO.mapType.toString()],
                    isMultiple: false,
                    values: map_types,
                    onChanged: (value) {
                      var tempOutput = new List<String>.from(value);
                      mapDTO.mapType = MapTypeApp.fromJson(tempOutput[0]);
                      widget.onChanged(jsonEncode(mapDTO).toString());
                    },
                  ),
                  // Zoom
                  SliderInputContainer(
                    label: "Zoom:",
                    initialValue: mapDTO.zoom != null ? mapDTO.zoom.toDouble() : 18,
                    color: kPrimaryColor,
                    min: 0,
                    max: 30,
                    onChanged: (double value) {
                      mapDTO.zoom = value.toInt();
                      widget.onChanged(jsonEncode(mapDTO).toString());
                    },
                  )
                ],
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Container(
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(25),
                    border: Border.all(width: 1.5, color: kSecond)
                ),
                child: Stack(
                  children: [
                    Padding(
                      padding: const EdgeInsets.only(top: 40, left: 10, right: 10, bottom: 10),
                      child: GridView.builder(
                          shrinkWrap: true,
                          gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 8),
                          itemCount: mapDTO.points.length,
                          itemBuilder: (BuildContext context, int index) {
                            return
                              Container(
                                decoration: boxDecoration(mapDTO.points[index], appContext),
                                padding: const EdgeInsets.all(5),
                                margin: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
                                child: getElement(index, mapDTO.points[index], size, appContext),
                              );
                          }
                      ),
                    ),
                    Positioned(
                      top: 10,
                      left: 10,
                      child: Text(
                        "Points géographiques",
                        style: TextStyle(fontSize: 15),
                      ),
                    ),
                    Positioned(
                      bottom: 10,
                      right: 10,
                      child: InkWell(
                        onTap: () {
                          showNewOrUpdateGeoPoint(
                              null,
                              (GeoPointDTO geoPoint) {
                                setState(() {
                                  mapDTO.points.add(geoPoint);
                                  widget.onChanged(jsonEncode(mapDTO).toString());
                                });
                              },
                              appContext,
                              context);
                        },
                        child: Container(
                          height: MediaQuery.of(context).size.width * 0.04,
                          width: MediaQuery.of(context).size.width * 0.04,
                          child: Icon(
                            Icons.add,
                            color: kTextLightColor,
                            size: 30.0,
                          ),
                          decoration: BoxDecoration(
                            color: kSuccess,
                            shape: BoxShape.rectangle,
                            borderRadius: BorderRadius.circular(20.0),
                            boxShadow: [
                              BoxShadow(
                                color: kSecond,
                                spreadRadius: 0.5,
                                blurRadius: 5,
                                offset: Offset(0, 1.5), // changes position of shadow
                              ),
                            ],
                          ),
                        ),
                      ),
                    )
                  ]),
              ),
            ),
          ],
        ),
      );
  }

  getElement(int index, GeoPointDTO point, Size size, AppContext appContext) {
    return Container(
      width: double.infinity,
      height: double.infinity,
      child: Stack(
        children: [
          Center(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: AutoSizeText(
                point.title == null ? "" : point.title[0].value,
                style: new TextStyle(fontSize: 20),
                maxLines: 2,
                textAlign: TextAlign.center,
              ),
            ),
          ),
          Positioned(
            top: 0,
            right: 0,
            child: Icon(
              getSectionIcon(SectionType.map),
              color: kSecond,
              size: 18.0,
            ),
          ),
          Positioned(
            bottom: 0,
            left: 0,
            child: InkWell(
                onTap: () {
                  showNewOrUpdateGeoPoint(
                      mapDTO.points[index],
                      (GeoPointDTO geoPoint) {
                        setState(() {
                          mapDTO.points[index] = geoPoint;
                          widget.onChanged(jsonEncode(mapDTO).toString());
                        });
                      },
                      appContext,
                      context);
                },
                child: Icon(
                  Icons.edit,
                  color: kPrimaryColor,
                  size: 20.0,
                )
            ),
          ),
          Positioned(
            bottom: 0,
            right: 0,
            child: InkWell(
                onTap: () {
                  setState(() {
                    mapDTO.points.removeAt(index);
                  });
                  widget.onChanged(jsonEncode(mapDTO).toString());
                },
                child: Icon(
                  Icons.delete,
                  color: kError,
                  size: 20.0,
                )
            ),
          )
        ],
      ),
    );
  }
}


boxDecoration(GeoPointDTO geoPointDTO, appContext) {
  return BoxDecoration(
    color: kBackgroundColor,
    shape: BoxShape.rectangle,
    border: Border.all(width: 1.5, color: kSecond),
    borderRadius: BorderRadius.circular(10.0),
    boxShadow: [
      BoxShadow(
        color: kSecond,
        spreadRadius: 0.5,
        blurRadius: 5,
        offset: Offset(0, 1.5), // changes position of shadow
      ),
    ],
  );
}