var uww_template = "<div class="weather-widget-header"><div id= "uww_field_header_name" class="weather-widget-header__city"></div><div class="weather-widget-header__temp"><img id="uww_field_header_image" src="" alt=""><span id="uww_field_header_temp"></span></div></div><div class="weather-widget"><div class="weather-widget__wrapper"><ul class="weather-widget__list"><li class="weather-widget__item"><div class="weather-widget__today"><span>Погода сегодня в</span><span id="uww_field_date"></span></div><a href="javascript:void(0);" class="weather-widget__location"><span id="uww_field_name" class="weather-widget__name"></span><i class="fa fa-cog"></i></a><div class="weather-widget__conditions"><div class="weather-widget__temp"><div id="uww_field_temp" class="weather-widget__number"></div><div class="weather-widget__icon"><img id="uww_field_image" src="" class="" /></div></div><div id="uww_field_desc" class="weather-widget__desc"></div><div class="weather-widget__info"><div class="weather-widget__feeling"><span>Ощущается как</span><span id="uww_field_feeling"></span></div><div class="weather-widget__min"><span>Мин.</span><span id="uww_field_min"></span></div><div class="weather-widget__max"><span>Макс.</span><span id="uww_field_max"></span></div></div></div><a href="javascript:void(0);" id="uww_field_detail" class="weather-widget__details"><span>Подробнее</span><i class="fa fa-chevron-circle-right"></i></a></li><li class="weather-widget__item"><div class="weather-widget__title">Настройки</div><a href="javascript:void(0);" class="weather-widget__close"><i class="fa fa-times"></i></a><form action="" method="post" class="weather-widget__newCity newCity"><label class="newCity__label">Введите город</label><input type="text" class="newCity__text tranparentInput" placeholder="Введите город" data-location="" autocomplete="off"><ul class="weather-widget__searchResults" style="display: none;"></ul><input type="button" class="newCity__cancel tranparentInput" value="Отмена"><input type="hidden" name="_csrf_token" value="99du2vsMjkk6FzdWmSdBOzJ4kSWP193tXQTTVK0fsD4"><input type="button" class="newCity__submit tranparentInput" value="ОК"></form></li></ul></div></div>";

var style = document.createElement("style");
style.appendChild(document.createTextNode(""));
document.head.appendChild(style);
style.sheet.insertRule(".weather-widget-container {width:180px;height:34px;overflow:hidden;position:absolute;text-align:right;}", 0);


var uww_lang = 'ru';
var uww_styles_href = "https://pogoda.unian.net/styles/widget_new.css";
var uww_styles_link = document.createElement('link');
uww_styles_link.setAttribute('rel', 'stylesheet');
uww_styles_link.setAttribute('href', uww_styles_href);
document.getElementsByTagName('head')[0].appendChild(uww_styles_link);

var uww_container = document.getElementById('unian_weather_widget');

if (uww_container) {
	uww_container.innerHTML = htmlDecode(uww_template);
	fillWidget();
}


function htmlDecode(input){
	var e = document.createElement('div');
	e.innerHTML = input;
	return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
}

function fillWidget() {
	fillField('date', "10:55");
	fillField('header_name', "Париж");
	fillField('header_temp', "+5" + "°");
	fillFieldAttribute('header_image', 'src', "https://pogoda.unian.net/images/icons/d400.svg");
	fillField('name', "Париж");
	fillField('temp', "+5" + "°");
		fillFieldAttribute('image', 'src', "https://pogoda.unian.net/images/icons/d400.svg");
	fillField('desc', "Пасмурно, сплошная облачность");
	fillField('feeling', "+3" + "°");
	fillField('min', "+6" + "°");
	fillField('max', "+9" + "°");

	fillFieldAttribute('detail', 'href', "https://pogoda.unian.net/");
}
function fillField(field_id, field_val) {
	var prefix = 'uww_field_';
	var element = document.getElementById(prefix + field_id);
	if (element) {
		element.innerHTML = field_val;
	}
}
function fillFieldAttribute(field_id, att_name, att_value) {
	var prefix = 'uww_field_';
	var element = document.getElementById(prefix + field_id);
	if (element) {
		element.setAttribute(att_name, att_value);
	}
}

if(!!window.jQuery) {
	$(function(){
		$('.weather-widget-container')
			.on('focus', '.newCity__text', function() {
				$(this).val('');
				$('.weather-widget-container').addClass('hovered');
			})
			.on('focusout', '.newCity__text', function() {
				$('.weather-widget-container').removeClass('hovered');
			})
			.on('keyup', '.newCity__text', function () {
				var query = $(this).val();
				if(query.length !== 0) {
					$('.newCity__cancel').attr('disabled', false);
				} else {
					$('.newCity__cancel').attr('disabled', true);
				}
				if (query.length >= 3 ) {
					searchUnianWidgetLocations(query);
				}
			})
			.on('click', 'ul.weather-widget__searchResults li', function () {
				var result_text = $(this).text();
				var result_id = $(this).data('location');
				$('.newCity__text').val(result_text).attr('data-location', result_id);

				$('ul.weather-widget__searchResults').css('display', 'none').html('');
			})
			.on('click', '.newCity__submit', function () {
				var location_id = $('.newCity__text').data('location');
				changeUnianWidgetDefaultLocation(location_id);
			})
			.on('click', '.weather-widget__location', function(e) {
				e.preventDefault();
				$('.weather-widget__list').css('top', '-100%');
			})
			.on('click', '.weather-widget__close', function(e) {
				e.preventDefault();
				$('.weather-widget__list').css('top', '0');
			})
			.on('click', '.newCity__cancel', function() {
				$('.newCity__text').val('').attr('data-location', '');
				$(this).attr('disabled', true);
			})
		;
	});

	function changeUnianWidgetDefaultLocation(location_id) {
		if (!location_id) {
			return;
		}
		var spinner = $(document.createElement('i'), {class:'fa fa-fw fa-2x fa-spinner fa-spin weather-widget__loader'});
		spinner.insertAfter($('.newCity'));
		$.ajax({
			url: 'https://pogoda.unian.net/load',
			type: 'get',
			xhrFields: {
				withCredentials: true
			},
			dataType: 'json',
			data: {location_id: location_id, type: 'json', lang: uww_lang },
			success: function (data) {
				spinner.remove();
				$('.weather-widget__list li:first').replaceWith(data.html);
				fillField('header_name', data.name);
				fillField('header_temp', data.temp + "°");
				fillFieldAttribute('header_image', 'src', data.image);
				$('.weather-widget__list').css('top', '0');
			},
			error: function (data) {
				spinner.remove();
				console.error(data);
			}
		});
	}

	function searchUnianWidgetLocations(query) {
		$.ajax({
			url: 'https://pogoda.unian.net/search',
			type: 'get',
			data: {query: query, locations_only:1, type: 'json'},
			success: function (data) {
				if ( data.locations.length ) {
					showUnianWidgetSearchResults(data.locations);
				}
			}
		});
	}

	function showUnianWidgetSearchResults(locations) {
		var container = $('ul.weather-widget__searchResults');
		container.html('');
		for (var i in locations) {
			var location = locations[i];
			var field_name = uww_lang == 'ru' ? 'nameRus' : 'nameUkr';
			var result_item = $(document.createElement('li'), {title: location[field_name]}).attr('data-location', location.id).text(location[field_name]);

			result_item.appendTo(container);
		}
		container.css('display', 'block');
	}
}