homework/HW11 Redux/script.js

const select = document.getElementById("select");
const input = document.getElementById("input");
const btn = document.getElementById("btn");
const cash = document.querySelector(".cashbox");
const bablo = document.getElementById("bablo");
const cashier = document.getElementById("cashier");


const store = createStore(reducer);
updateShowCase()
store.subscribe(updateCashbox);
store.subscribe(updateShowCase);
const unsubscribe = store.subscribe(() => console.log(store.getState()));

function reducer(state, { type, ШО, СКОКА, БАБЛО }) {
  //объект action деструктуризируется на три переменных
  if (!state) {
    //начальная уборка в ларьке:
    return {
      stock: {
        пиво: {
          price: 20,
          amount: 100,
          img : "https://pivasik.com.ua/wp-content/uploads/2019/09/orange.png",
          
        },
        чипсы: {
          price: 25,
          amount: 100,
          img : "https://cdn.27.ua/499/24/05/74757_4.jpeg",
        },
        сиги: {
          price: 50,
          amount: 100,
          img: "https://img1.liveinternet.ru/images/attach/c/8/100/745/100745087_kozak_bf_red500x500.jpg",
        },
      },
      cashbox: 0,
    };
    //
  }
  if (type === "КУПИТЬ") {
    //если тип action - КУПИТЬ, то:
    return {
      ...state, //берем все что было из ассортимента
      stock: {
          ...state.stock,
          [ШО]: {
            price: state.stock[ШО].price,
            amount: state.stock[ШО].amount - СКОКА,
            img: state.stock[ШО].img
      }
      }, //и уменьшаем то, что покупается на количество
    cashbox: state.cashbox + БАБЛО,
    };
  }

  return state; //если мы не поняли, что от нас просят в `action` - оставляем все как есть
}

function createStore(reducer) {
  let state = reducer(undefined, {}); //стартовая инициализация состояния, запуск редьюсера со state === undefined
  let cbs = []; //массив подписчиков

  const getState = () => state; //функция, возвращающая переменную из замыкания
  const subscribe = (cb) => (
    cbs.push(cb), //запоминаем подписчиков в массиве
    () => (cbs = cbs.filter((c) => c !== cb))
  ); //возвращаем функцию unsubscribe, которая удаляет подписчика из списка

  const dispatch = (action) => {
    const newState = reducer(state, action); //пробуем запустить редьюсер
    if (newState !== state) {
      //проверяем, смог ли редьюсер обработать action
      state = newState; //если смог, то обновляем state
      for (let cb of cbs) cb(); //и запускаем подписчиков
    }
  };

  return {
    getState, //добавление функции getState в результирующий объект
    dispatch,
    subscribe, //добавление subscribe в объект
  };
}
let html = "";
for (let key in store.getState().stock) {
  html += `<option>${key}</option>`;
}
select.innerHTML = html;

btn.addEventListener("click", buy);
input.addEventListener("input", counter );
select.addEventListener("click", counter)

function buy(e) {
    if(bablo.value >= (input.value * store.getState().stock[select.value].price) ){
  store.dispatch({
    type: "КУПИТЬ",
    ШО: select.value,
    СКОКА: input.value,
    БАБЛО: Number(bablo.value),
  });
  bablo.value = "";
}else{
    alert("Не хватает бабла");
}
}
function updateCashbox(){
    cash.innerText = `КАССА : ${store.getState().cashbox}`
}
function counter( ){
    if (input.value > store.getState().stock[select.value].amount){
      input.value = store.getState().stock[select.value].amount;
    }
    cashier.innerText = ` К ОПЛАТЕ : ${ (input.value * store.getState().stock[select.value].price)}`;
}

function updateShowCase(){
  const obj = store.getState().stock;
  const wrapperShowCase = document.querySelector(".wrapperShowCase");
  wrapperShowCase.innerHTML = "";
  let  html =""
  for(const good in obj){
    html += `<div class="showCaseBlock">`;
    html += `<img class="img" src = ${obj[good].img}>`;
    html += `<p class="info">ЦЕНА: ${obj[good].price} грн</p>`;
    html += `<p class="info">в наличии: ${obj[good].amount} шт</p>`
    html += `</div>`;
  }
  wrapperShowCase.innerHTML = html;
}