/*
// D. Manipulation des chaînes

// D.2. Créer une constante appelée `nom` et y assigner la chaîne de caractères `Regina`
const nom = 'Regina';
// D.3. Créer une constante nommée `url`.
const url = 'images/'+nom.toLowerCase()+'.jpg';
// D.4. Créer la variable `html`
let html = `<a href="${url}">${url}</a>`;
console.log( html );
// D.5. Afficher le contenu de la variable `html` dans la page.
document.querySelector('.pizzasContainer').innerHTML = html;
// D.6. Modifier encore la variable html avant son affichage
html = `<a href="${url}">
	<img src="${url}" />
	<h4>${nom}</h4>
</a>`;
document.querySelector('.pizzasContainer').innerHTML = html;

// E.1. Manipulation des tableaux
let data = [ 'Regina', 'Napolitaine', 'Spicy' ];
html = '';
// E.1. boucle for :
for (let i = 0; i < data.length; i++) {
	const nom = data[i],
		url = `images/${nom.toLowerCase()}.jpg`;
	html += `<a href="${url}">
		<img src="${url}" />
		<h4>${nom}</h4>
	</a>`;
}
document.querySelector('.pizzasContainer').innerHTML = html;

// E.1. Array.forEach :
html = '';
data.forEach( nom => {
	const url = `images/${nom.toLowerCase()}.jpg`;
	html += `<a href="${url}">
		<img src="${url}" />
		<h4>${nom}</h4>
	</a>`;
})
document.querySelector('.pizzasContainer').innerHTML = html;

// E.1. Array.map + Array.join :
html = data.map( nom => `<a href="images/${nom.toLowerCase()}.jpg">
<img src="images/${nom.toLowerCase()}.jpg" />
<h4>${nom}</h4>
</a>`).join('');
document.querySelector('.pizzasContainer').innerHTML = html;

// E.1. Array.reduce :
html = data.reduce( (str, nom) => str+`<a href="images/${nom.toLowerCase()}.jpg">
	<img src="images/${nom.toLowerCase()}.jpg" />
	<h4>${nom}</h4>
</a>`,'');
document.querySelector('.pizzasContainer').innerHTML = html;
*/

// E.2. Les objets littéraux
const data = [
	{
		nom: 'Regina',
		base: 'tomate',
		prix_petite: 6.5,
		prix_grande: 9.95,
		image: 'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300'
	},
	{
		nom: 'Napolitaine',
		base: 'tomate',
		prix_petite: 6.5,
		prix_grande: 8.95,
		image: 'https://images.unsplash.com/photo-1562707666-0ef112b353e0?&fit=crop&w=500&h=300'
	},
	{
		nom: 'Spicy',
		base: 'crème',
		prix_petite: 5.5,
		prix_grande: 8,
		image: 'https://images.unsplash.com/photo-1458642849426-cfb724f15ef7?fit=crop&w=500&h=300'
	}
];

function render(pizzas) {
	const html = pizzas.reduce( (str, {image, nom, prix_petite, prix_grande}) => str +
		`<article class="media">
			<a href="${image}">
				<img src="${image}" />
				<section class="infos">
					<h4>${nom}</h4>
					<ul>
						<li>Prix petit format : ${prix_petite.toFixed(2)} €</li>
						<li>Prix grand format : ${prix_grande.toFixed(2)} €</li>
					</ul>
				</section>
			</a>
		</article>`, '');
	document.querySelector('.pizzasContainer').innerHTML = html;
}

// G.1. Tri de tableaux
function sortByName(a, b) {
	if ( a.nom < b.nom ) {
		return -1;
	} else if ( a.nom > b.nom ) {
		return 1;
	}
	return 0;
}

// tri par prix_petit croissant PUIS par prix_grande croissant
function sortByPrice(a, b) {
	if ( a.prix_petite !== b.prix_petite ) {
		return a.prix_petite - b.prix_petite;
	}
	return a.prix_grande - b.prix_grande;
}

// Attention : data.sort() modifie le tableau original
render( data.sort(sortByName) );
render( data.sort(sortByPrice) );

// // G.2. Système de filtre
render( data.filter( pizza => pizza.base == 'tomate' ))
render( data.filter( pizza => pizza.prix_petite < 6 ))
// deux possibilités pour les pizzas avec deux fois la lettre "i"
render( data.filter( pizza => pizza.nom.split('i').length == 3 ))
render( data.filter( pizza => pizza.nom.match(/i/g).length == 2 ))

// // G.3. Destructuring
render( data.filter( ({base}) => base == 'tomate' ))
render( data.filter( ({prix_petite}) => prix_petite < 6 ))
render( data.filter( ({nom}) => nom.match(/i/g).length === 2 ));