import Toasts from "./components/toasts.js";
import Modals from "./components/modals.js";

window.demoToastInfo = function () {
	Toasts.createInfo(
		"Title",
		"Произошла ошибка. Повтори позже."
	).show();
}

window.demoToastSuccess = function () {
	Toasts.createSuccess(
		"Success",
		"Всё отлично, всё работает, это успех тостера"
	).show();
}

window.demoToastWarning = function () {
	Toasts.createWarning(
		"Warning",
		"Произошла ошибка. Повтори позже."
	).show();
}

window.demoToastDanger = function () {
	Toasts.createDanger(
		"Danger",
		"Произошла ошибка. Повтори позже."
	).show();
}

window.demoModal = function() {
	Modals.create("demo-modals", {
		title: "Demo modal window",
		footer: "<p>Footer text</p>",
		actions: modal => {
			const buttonCancel = document.createElement("button");
			buttonCancel.classList.add("btn");
			buttonCancel.classList.add("btn-primary");
			buttonCancel.innerHTML = "Cancel";

			buttonCancel.addEventListener("click", e => {
				modal.close();
			});

			const buttonApply = document.createElement("button");
			buttonApply.classList.add("btn");
			buttonApply.classList.add("btn-success");
			buttonApply.innerHTML = "Apply";

			buttonApply.addEventListener("click", e => {
				modal.close();

				setTimeout(() => {
					Toasts.createSuccess(
						"Success",
						"Всё отлично, всё работает, это успех"
					).show();
				}, 300);
			});

			return [ buttonCancel, buttonApply ];
		},
		body: modal => {
			return `
				<p class="text">Любой контент: текст, формы, списки.</p>

        <div class="form-group">
          <label class="label" for="modal-device-name">
            Device name
            <input class="input" id="modal-device-name" type="text" placeholder="Kitchen Light">
          </label>
        </div>

        <div class="form-group">
          <label class="label" for="modal-device-desc">
            Description
            <textarea class="input" id="modal-device-desc" rows="3" placeholder="Optional"></textarea>
          </label>
        </div>
			`;
		}
	}).show();
}

document.addEventListener("DOMContentLoaded", e => {
	console.log("App init");
});