'use strict';

const logo = document.querySelector('.logo');
const btns = document.querySelector('.buttons');

// Fetch the items from the JSON file
function loadItems() {
  return (
    fetch('data/data.json')
      // 1. fetch로 불러온 결과가 성공적이면
      .then((response) => response.json())
      // 2. 결과를 json으로 반환하고
      .then((json) => json.items)
    // 3. json 안의 items를 가져온다.
  );
  // 결국 반환값은 Promise
}

// Update the list with the given items
function displayItems(items) {
  const container = document.querySelector('.items');
  container.innerHTML = items.map((item) => createHTMLString(item)).join('');
}

// Create li tag that is in the container
function createHTMLString(item) {
  return `
  <li class="item">
    <img src="${item.image}" alt="${item.type}" class="item__thumbnail" />
    <span class="item__description">${item.gender}, ${item.size}</span>
  </li>
  `;
}

// Reload this page
function pageReload() {
  location.reload();
}

// Filter these itmes that fit the conditions
function filtering(e) {
  const typeFilter = e.target.alt;
  const colorFilter = e.target.classList[2];
  const container = document.querySelector('.items');
  // type분류 버튼을 눌렀는지 color분류 버튼을 눌렀는지 알기 위해 일단 두개 다 받기
  // + ul 안의 html 작성 위해 container 받아오기

  loadItems().then((items) => {
    // item을 받아오는 데 성공하면 - .
    if (colorFilter) {
      // 만약 color 분류 버튼을 눌렀으면
      const itemList = items.filter((item) => colorFilter === item.color);
      // callback조건이 참인 요소만 뽑아 배열로 생성해주는 filter함수 사용1
      container.innerHTML = itemList
        .map((item) => createHTMLString(item))
        .join('');
      // container의 innerHTML 변경1
    } else if (typeFilter) {
      // 만약 type 분류 버튼을 눌렀으면
      const itemList = items.filter((item) => typeFilter === item.type);
      // .. filter 함수 사용2
      container.innerHTML = itemList
        .map((item) => createHTMLString(item))
        .join('');
      // container의 innerHTML 변경2
    }
    // 뭔가 if 조건 없이 그냥 두 개를 다 적으면 조금이라도 손실?이 있을까봐
    // 나눠 적었는데 data양이 작아서 그다지 의미 없는 듯 ...?
  });
}

function setEventListeners(items) {
  // eventListner 관리
  logo.addEventListener('click', pageReload);
  // logo 버튼을 눌렀을 때에는 page가 reload 되도록 함
  btns.addEventListener('click', filtering);
  // btn들(6가지)을 모두 가져와 click 이벤트가 발생했을 때 filtering 함수를 실행함.
}

// main
loadItems()
  .then((items) => {
    displayItems(items);
    setEventListeners(items);
  })
  .catch(console.log);

'use strict';

const logo = document.querySelector('.logo');
const btns = document.querySelector('.buttons');

// Fetch the items from the JSON file
function loadItems() {
  return (
    fetch('data/data.json')
      // 1. fetch로 불러온 결과가 성공적이면
      .then((response) => response.json())
      // 2. 결과를 json으로 반환하고
      .then((json) => json.items)
    // 3. json 안의 items를 가져온다.
  );
  // 결국 반환값은 Promise
}

// Update the list with the given items
function displayItems(items) {
  const container = document.querySelector('.items');
  container.innerHTML = items.map((item) => createHTMLString(item)).join('');
}

// Create li tag that is in the container
function createHTMLString(item) {
  return `
  <li class="item">
    <img src="${item.image}" alt="${item.type}" class="item__thumbnail" />
    <span class="item__description">${item.gender}, ${item.size}</span>
  </li>
  `;
}

function onButtonClick(event, items) {
  const dataset = event.target.dataset;
  const key = dataset.key;
  const value = dataset.value;

  if(key == null || value == null) return;

  displayItems(items.filter(item => item[key] === value))
}

function setEventListeners(items) {
  // eventListner 관리: 다른점★
  logo.addEventListener('click', e => displayItems(items);
  btns.addEventListner('click', event => onButtonClick(event, items));
}

// main
loadItems()
  .then((items) => {
    displayItems(items);
    setEventListeners(items);
  })
  .catch(console.log);

'use strict';

const logo = document.querySelector('.logo');
const btns = document.querySelector('.buttons');
const container = document.querySelector('.items');

// Fetch the items from the JSON file
function loadItems() {
  return (
    fetch('data/data.json')
      // 1. fetch로 불러온 결과가 성공적이면
      .then((response) => response.json())
      // 2. 결과를 json으로 반환하고
      .then((json) => json.items)
    // 3. json 안의 items를 가져온다.
  );
  // 결국 반환값은 Promise
}

// Create li elements which is in ul
function createElement(item) {
  const li = document.createElement('li');
  const img = document.createElement('img');
  const span = document.createElement('span');

  // img.setAttribute('class', 'item__thumbnail'); or
  img.classList.add('item__thumbnail');
	// img.setAttribute('src', item.image); or
	img.src = item.image;
  // img.setAttribute('alt', item.type); or
  img.alt = item.type;


  // span.setAttribute('class', 'item__description'); or
  span.classList.add('item__description');
  span.innerHTML = `${item.gender}, ${item.size}`;

  // li.setAttribute('class', 'item'); or
  li.classList.add('item');
	// li.setAttribute('data-type', item.type); or
	li.dataset.type = item.type;
  // li.setAttribute('data-color', item.color); or
	li.dataset.color = item.color;

  li.append(img);
  li.append(span);

  return li;
}

// Filter what is visible elements
function visibleItems(event, itemElements) {
  const dataset = event.target.dataset;
  const key = dataset.key;
  const value = dataset.value;

  if (key == null || value == null) return;

  updateItems(itemElements, key, value);
}

// Update items that should be seen
function updateItems(itemElements, key, value) {
  itemElements.forEach((element) => {
    if (element.dataset[key] === value) element.classList.remove('invisible');
    else element.classList.add('invisible');
  });
}

// main
loadItems()
  .then((items) => {
    const itemElements = items.map(createElement);
    container.append(...itemElements);
		// ...을 붙이면 DOMString, Node List 등을 Elements로 바꿔준다.
    btn.addEventListener('click', event => visibleItems(event, itemElements);
  })
  .catch(console.log);