let select = document.querySelector("#select");
let button = document.querySelector(".button");
let input = document.querySelector("#input");
let inputMoney = document.querySelector("#input-money")
let table = document.querySelector(".table");

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 в объект
    }
};

function reducer(state, {type, ШО, СКОКА, price}){ //объект action деструктуризируется на три переменных
    if (!state){ //начальная уборка в ларьке:
        return {
            пиво: {count: 100, price: 25},
            чипсы: {count: 100, price: 15},
            сиги: {count: 100, price: 30}
        }
    }

    if (type === 'КУПИТЬ' && state[ШО].count >= СКОКА && state[ШО].price <= price){ //если тип action - КУПИТЬ, то:
        return {
            ...state, //берем все что было из ассортимента
            [ШО]: {count: state[ШО].count - СКОКА, price: state[ШО].price} //и уменьшаем то, что покупается на количество
        }
    }

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

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

for(let [key, value] of Object.entries(store.getState())) {
    let option = document.createElement("option");
    
    console.log(key);

    option.innerText = key;

    select.appendChild(option);
}

let createTable = function() {
    let str = "<tr><td>Товар</td><td>Количество</td><td>Цена</td></tr>";

    for(let [key, value] of Object.entries(store.getState())) {
        str += `<tr><td>${key}</td><td>${value.count}</td><td>${value.price}</td></tr>`;
    }

    table.innerHTML = str;
}

store.subscribe(createTable);

button.addEventListener("click", function() {
    store.dispatch({type: "КУПИТЬ", ШО: select.value, СКОКА: input.value, price: inputMoney.value});
});

createTable();