import 'package:auto_size_text/auto_size_text.dart';
import 'package:flutter/material.dart';
import 'package:flutter_widget_from_html/flutter_widget_from_html.dart';
import 'package:manager_app/Components/fetch_section_icon.dart';
import 'package:manager_app/Components/resource_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/Models/managerContext.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:manager_api_new/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,
    required this.initialValue,
    required this.onChanged,
  }) : super(key: key);

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

class _MapConfigState extends State<MapConfig> {
  late MapDTO mapDTO;

  String mapType= "hybrid";

  @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) {
      switch(mapDTO.mapType!.value) {
        case 0:
          mapType = "none";
          break;
        case 1:
          mapType = "normal";
          break;
        case 2:
          mapType = "satellite";
          break;
        case 3:
          mapType = "terrain";
          break;
        case 4:
          mapType = "hybrid";
          break;
      }
    }

    /*print("MAPDTO");
    print(mapDTO);
    print(mapDTO.mapType.toString());
    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
                  ResourceInputContainer(
                    label: "Icône:",
                    initialValue: mapDTO.iconResourceId,
                    color: kPrimaryColor,
                    imageFit: BoxFit.contain,
                    onChanged: (ResourceDTO resource) {
                      if(resource.id == null) {
                        mapDTO.iconSource = null;
                        mapDTO.iconResourceId = null;
                      } else {
                        mapDTO.iconResourceId = resource.id;
                        mapDTO.iconSource = resource.url;
                      }
                      widget.onChanged(jsonEncode(mapDTO).toString());
                    },
                    isSmall: true
                  ),
                  // Map Type
                  MultiSelectContainer(
                    label: "Type:",
                    initialValue: [mapType], //mapDTO.mapType.toString()
                    isMultiple: false,
                    values: map_types,
                    onChanged: (value) {
                      var tempOutput = new List<String>.from(value);
                      print("Type MAP");
                      print(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: [
                    Container(
                      constraints: BoxConstraints(minHeight: 100),
                      child: 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: HtmlWidget(
                  point != null ? point.title == null ? "" : point.title![0].value! : "",
                  //textAlign: TextAlign.left,
                  customStylesBuilder: (element) {
                    return {'text-align': 'center'};
                  },
                  textStyle: TextStyle(fontSize: 20)
              ),
            ),
          ),
          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
      ),
    ],
  );
}