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() {
    	var wrap = this.element
    	var favorites = localStorage.getItem('favorites');
    	
    	if (typeof favorites === 'object') {
			var favorites = '';
		}

    	if (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) {
                    	console.log(response, wrap.id)
                    	
                    	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);
                    		}
                    	}
                    }
                });
    		})
    	}
    }
}