var link = document.querySelector('.login');
var popup = document.querySelector('.modal-content');
var close = document.querySelector('.modal-content-close');
var login = popup.querySelector('[name=login]');
var form = popup.querySelector('form');
var password = popup.querySelector('[name=password]');
var storage = localStorage.getItem('login');
/*
Ищем кнопку входа и пихаем ее в переменную link.
var link - название переменной (link), в которой будет находиться найденный элемент.
document - то где ищем (по всему DOM).
querySelector - метод для поиска элемента (можно искать теги, классы, id и тд).
('.login') - передаем методу css селектор, по которому будем искать.
[name=login] - поиск по атрибуту.

querySelectorAll
document.querySelectorAll('nav li');  - вернет масcив со всеми li из nav.
Можно найти, например, все элементы с классом login.
*/
link.addEventListener('click', function(event) {
	event.preventDefault();
//Убираем событие по умолчанию у элемпента, в нашем случае это переход по ссылке (href="#").
//Только если мы вызываем этот медод в самом НАЧАЛЕ нашей функции.
	console.log('окно появилось');
	popup.classList.add('modal-content-show');
	login.focus(); //фокус на поле логин.
/*
	Первое (popup) - это элемент, которому добавляем новый класс.
	classList - свойство, содержащее в себе методы для работы с классами.
	add - метод добавления класса.
	('modal-content-show') - название класса, которое нужно добавить элементу, при работе с классами здесь, мы НЕ используем точку! Мы указываем название класса.
	Другие методы:
		element.classList.add(); - добавляет класс;
		element.classList.remove(); - удаляет класс;
		element.classList.toggle(); - переключает класс;
		element.classList.contains(); - сообщает, есть ли класс у элемента;
*/
	if (storage) {
		login.value = storage; // если в сторедж есть значение, то значение логин = сторедж, то есть, подставлшяем то, что мы сохранили в сторедж.
		password.focus();
	} else {
		login.focus(); // елси if не верно, то фокус на поле логин.
	}
});
/*
EVENT - обратить внимание и запомнить!
link - элемент у которого мы будем ловить события в нашем случае это переменная link.
addEventListener - метод для отлова события.
click - определяем какие события мы ловим (клики).
function(){} - функция, которая будет выполняться каждый раз, когда мы ловим событие "клик".
console.log('Сообщение в консоль браузера'); - сообщение, которое выводиться в консоль после клика.
*/

close.addEventListener('click', function(event) {
	event.preventDefault();
//event.preventDefault(); - для подстраховки, если на крестик решат повесить ссылку.
	console.log('окно исчезло');
	popup.classList.remove('modal-content-show');
//Убираем класс у блока, тем самым делая его невидимым.
});

form.addEventListener('submit', function(event) {
	//event.preventDefault();  //Перехват событий ставится в самом начале функции. (Мы перехватили событие у формы.)
	// console.log('отправляем форму');
	// console.log(login.value);
	// console.log(password.value);
	if (!(login.value && password.value)) {
		event.preventDefault(); //если не введены логин или пароль - мы неотправляем форму.
		console.log('Нужно ввести логин и пароль.');
		popup.classList.add('modal-error');
	} else {
		localStorage.setItem('login', login.value) //если пароль и логин введены, мы оставляем значение логина в хранилище браузера
	}
// значение else запускается тогда, когда if не выполняется
});

/*
if - оператор условия: если условие в скобках верное, то запускается код в фигурных скобочках.
(login.value && password.value) - значение value у login и password (условие будет верно, только если в пасворд и логин что-то введено).
&& (два амперсанта) - это "и".
! - переворачивает условие ноборот, в нашем случае это ОТСУТСТВИЕ значиния у логин и пароля, то есть условие будет верным, если у пассворд и логин ничего не введено.
*/
/*
localStorage.setItem('name', 'keks'); - записываем в локалье хранилище данные.
localStarage - глобольный объект работы с хранилищем.
setItem('name', 'keks') - метод для создания новой записи в хранилище.
'name' - ключ записи.
'keks' - значение записи.

localStorage:

localStorage.getItem() - получаем значение ключа из хранилища.
localStorage.setItem() - создаем новую запись в хранилище.
localStorage.removeItem() - удаляем запись из хранилища.
localStorage.clear() - полность очищаем хранилище.
*/

window.addEventListener('keydown', function(event) {  //keydown - нажатие клавиши
	if (event.keyCode == 27) { // == - сравнение, сравниваем что-то с чем-то, равно ли 27 - 27, 27 - номер клавиши эскейп.
		if (popup.classList.contains('modal-content-show')) { //мы проверяем, открыто ли наше модальное окно, contains - метод, который возвращает, есить ли класс у элемента или нет.
			popup.classList.remove('modal-content-show'); //если он есть, тогда мы его удаляем
		}
	}
});

//на 1 : 40