import { Controller } from 'stimulus';
import Inputmask from "inputmask";

/*
 * This is an example Stimulus controller!
 *
 * Any element with a data-controller="hello" attribute will cause
 * this controller to be executed. The name "hello" comes from the filename:
 * hello_controller.js -> "hello"
 *
 * Delete this file or adapt it for your use!
 */
export default class extends Controller {
    connect() {
    	function unic(item, colections) {
			var add = true;
			var del = false;
			colections.forEach(function (val, key) {
				if (val == item) {
					add = false;
					del = key;
				}
			})

			if (add) {
				colections.push(item)
			}

			return colections
		}

    	let sid = this.element.dataset.sid;
    	let like = this.element.querySelector('.like');
    	let dislike = this.element.querySelector('.dislike');
    	

		var favorites = localStorage.getItem('favorites');

		if (typeof favorites === 'object') {
			var favorites = '';
		}

		if (favorites.split(',').indexOf(sid) !== -1) {
			like.classList.add('d-none');
			dislike.classList.remove('d-none');
			this.update();
		}

		like.addEventListener('click', function(evn) {		
			var favorites = localStorage.getItem('favorites');
			var container = [];
			
			if (typeof favorites === 'object') {
				var favorites = '';
			}
			
			if (favorites) {
				favorites = favorites.split(',')
			} else {
				favorites = [];
			}
			
			favorites.push(sid)
			
			favorites.forEach(function (key) {
				container = unic(key, container);
			});
    		
    		localStorage.setItem('favorites', container.join());
			like.classList.add('d-none');
			dislike.classList.remove('d-none');
			this.update();
			alert('врач добавлен');
    	}.bind(this));

    	dislike.addEventListener('click', function (evn) {
    		var favorites = localStorage.getItem('favorites');
    		var favorites = favorites.replace( sid + ',', '');
    		var favorites = favorites.replace( ',' + sid, '');
    		var favorites = favorites.replace( sid, '');

    		localStorage.setItem('favorites', favorites);
    		like.classList.remove('d-none');
			dislike.classList.add('d-none');
			this.update();
    	}.bind(this))		
    }

    update() {
    	var wrap = document.getElementById('favoritesNaw');

    	if (wrap == null) {
    		return false;
    	}

    	wrap.innerHTML = "";

    	var favorites = localStorage.getItem('favorites');
    	var favoritesBtn = document.getElementById('favoritesBtn');
    	

    	if (typeof favorites === 'object') {
			var favorites = '';
		}

    	if (favorites) {
			favoritesBtn.href =	'/favorites/?q=' + favorites;

    		var left = 0;

    		favorites.split(',').forEach(function(sid, key) {
    			$.ajax({
                    dataType: "json",
	                method: "GET",
	                crossDomain: true,
	                url: "/api/doctor",
	                data: {
	                    'sid': sid,
	                },
	                success(response) {
                    	if (wrap.id == 'favorites-widget' && key < 8) {
                    		var a = document.createElement('a');
							a.classList = 'staff-link';
							a.href= "/specialist/" + response.data.alias;

							var img = document.createElement('img');
							img.classList = "staff-block__img";
							img.style.borderRadius = '100%';
							img.stylebackgroundRepeat = "no-repeat";
							img.style.background = "url(" + response.data.img + ")";
							img.style.backgroundSize = "cover"; 
							img.style.backgroundPosition = "center 0px";
							
							a.append(img);
							wrap.append(a);
                    	} else {
                    		if (key < 4) {
								var a = document.createElement('a');
								a.classList = 'favorites-link';
								a.href= "/specialist/" + response.data.alias;
								
								var div = document.createElement('img');
								div.classList = "img-vr";
								div.stylebackgroundRepeat = "no-repeat";
								div.style.background = "url(" + response.data.img + ")";
								div.style.backgroundSize = "cover"; 
								div.style.backgroundPosition = "center 0px";
								a.append(div);
								wrap.append(a);
                    		}
                    	}
                    }
                });
    		})
    	}
    }
}