/* global ymaps */
ymaps.ready(async () => {
	let myMap = new ymaps.Map(
		"ms-map__container",
		{
			center: [55.751574, 37.573856],
			zoom: 9,
			behaviors: ["default", "scrollZoom"]
		},
		{
			searchControlProvider: "yandex#search"
		}
	);

	const clusterer = new ymaps.Clusterer({
		preset: "islands#invertedVioletClusterIcons",
		groupByCoordinates: false,
		clusterDisableClickZoom: true,
		clusterHideIconOnBalloonOpen: false,
		geoObjectHideIconOnBalloonOpen: false
	});

	/**
	 * Функция возвращает объект, содержащий данные метки.
	 * Поле данных clusterCaption будет отображено в списке геообъектов в балуне кластера.
	 * Поле balloonContentBody - источник данных для контента балуна.
	 * Оба поля поддерживают HTML-разметку.
	 * Список полей данных, которые используют стандартные макеты содержимого иконки метки
	 * и балуна геообъектов, можно посмотреть в документации.
	 * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/GeoObject.xml
	 */
	const getPointData = function(index) {
		return {
			balloonContentHeader: '<font size=3><b><a target="_blank" href="https://yandex.ru">Здесь может быть ваша ссылка</a></b></font>',
			balloonContentBody: '<p>Ваше имя: <input name="login"></p><p>Телефон в формате 2xxx-xxx:  <input></p><p><input type="submit" value="Отправить"></p>',
			balloonContentFooter: "<font size=1>Информация предоставлена: </font> балуном <strong>метки " + index + "</strong>",
			clusterCaption: "метка <strong>" + index + "</strong>"
		};
	};

	/**
	 * Функция возвращает объект, содержащий опции метки.
	 * Все опции, которые поддерживают геообъекты, можно посмотреть в документации.
	 * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/GeoObject.xml
	 */
	const getPointOptions = function() {
		return {
			preset: "islands#violetIcon"
		};
	};

	/* асинхронно загружаем точки нашей карты */
	const points = await loadDataPoints("5cc82180e6b9d406cb074a77");

	let geoObjects = [];

	for (let i = 0, len = points.length; i < len; i++) {
		geoObjects[i] = new ymaps.Placemark(points[i], getPointData(i), getPointOptions());
	}

	/**
	 * Можно менять опции кластеризатора после создания.
	 */
	clusterer.options.set({
		gridSize: 80,
		clusterDisableClickZoom: true
	});

	/**
	 * В кластеризатор можно добавить javascript-массив меток (не геоколлекцию) или одну метку.
	 * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Clusterer.xml#add
	 */
	clusterer.add(geoObjects);
	myMap.geoObjects.add(clusterer);

	/**
	 * Спозиционируем карту так, чтобы на ней были видны все объекты.
	 */

	myMap.setBounds(clusterer.getBounds(), {
		checkZoomRange: true
	});
});

/**
 *
 */
async function loadDataPoints(mapId) {
	return fetch("https://moscowseasons.com/graphql", {
		method: "POST",
		body: JSON.stringify({
			operationName: "map",
			variables: {
				id: mapId
			},
			query: `query map ($id: ID) {
						map(id: $id) {
							slug
							layers {
								header
								points {
									address {
										lat
										lon
										address
										__typename
									}
									title
									shortDesc
									event {
										slug
									}
									__typename
								}
								__typename
							}
							__typename
						}
						__typename
					}`
		})
	})
		.then(response => response.json())
		.then(data => {
			let points = [];
			data.data.map.layers.forEach(layer => {
				layer.points.forEach(point => {
					points.push([point.address.lon, point.address.lat]);
				});
			});
			return points;
		});
}
