function createStore(reducer){ 
    let state = reducer(undefined, {})
    let cbs   = []
    return {
        dispatch(action){
            const newState = reducer(state, action)
            if (newState !== state){
                state = newState
                for (let cb of cbs) 
                    cb()
            }
        },
        getState(){ 
            return state
        },
        subscribe(cb){
            cbs.push(cb)
            return () => cbs = cbs.filter(c => c !== cb) 
        }
    }
}

function createKiosk(state){
    let div = document.getElementById('content')
    div.innerHTML = ''
    let hello = document.createElement('span')
    hello.innerHTML = 'ГАСТРОНОМ "У ЛЮСИ" <br />'
    hello.style.color = '#4B0082'
    div.appendChild(hello)

    let pivo = document.createElement('span')
    pivo.innerHTML = `- Пивасик по ${state.пивасик.БАБЛО} грн,\n`
    div.appendChild(pivo)
    let pivoAmount = document.createElement('span')
    pivoAmount.innerHTML = `${state.пивасик.СКОКА}\n банок в наличии<br />`
    div.appendChild(pivoAmount)

    let chips = document.createElement('span')
    chips.innerHTML = `- Чипсики по ${state.чипсики.БАБЛО} грн,\n`
    div.appendChild(chips)
    let chipsAmount = document.createElement('span')
    chipsAmount.innerHTML = `${state.чипсики.СКОКА}\n пачек в наличии<br />`
    div.appendChild(chipsAmount)

    let cigi = document.createElement('span')
    cigi.innerHTML = `- Сиги по ${state.сиги.БАБЛО} грн,\n`
    div.appendChild(cigi)
    let cigiAmount = document.createElement('span')
    cigiAmount.innerHTML = `${state.сиги.СКОКА}\n пачек в наличии<br />`
    div.appendChild(cigiAmount)

    let kassa = document.createElement('span')
    kassa.innerText = `- Бабосиков в кассе: ${state.касса} грн\n`
    div.appendChild(kassa)
    let select = document.createElement('select')
    div.appendChild(select)

    let pruduct = document.createElement('option')
    pruduct.innerText = 'Выберите товар'
    select.appendChild(pruduct)

    let pivasik = document.createElement('option')
    pivasik.innerText = 'пивасик'
    select.appendChild(pivasik)

    let chipsiki = document.createElement('option')
    chipsiki.innerText = 'чипсики'
    select.appendChild(chipsiki)

    let cigarette = document.createElement('option')
    cigarette.innerText = 'сиги'
    select.appendChild(cigarette)

    let inputAmount = document.createElement('input')
    inputAmount.type = 'number'
    inputAmount.min = '1'
    div.appendChild(inputAmount)

    let button = document.createElement('button')
    button.innerText = "Купить"
    div.appendChild(button)

    button.onclick = () => {
        if(state[select.value].СКОКА >= inputAmount.value){
            let pieces = inputAmount.value
            let price = select.value       
            store.dispatch(купи(price, pieces))
        } else{
            alert("А ты не лопнишь, деточка?...ладно, шучу:D - такого количества товара в наличии попросту нет!")
        }  
    }   
    return state
}


function reducer(state, {type, ШО, СКОКА, БАБЛО}){
    if (!state){
        return {
            пивасик: {СКОКА: 100, БАБЛО: 30},
            чипсики: {СКОКА: 100, БАБЛО: 20},
            сиги: {СКОКА : 100, БАБЛО: 40},
            касса: 0
        }
    }

    if (type === 'КУПИТЬ'){
        return {
            ...state,
            [ШО]: {...state[ШО], СКОКА: state[ШО].СКОКА - СКОКА},
            касса: state[ШО].БАБЛО * СКОКА + state.касса
        }
    }
    return state
}

const store = createStore(reducer)
const unsubscribe1 = store.subscribe(() => console.log('подписчик 1', store.getState()))
const kiosk = store.subscribe(() => createKiosk(store.getState()))
const купиПивасик = СКОКА => ({type: 'КУПИТЬ', ШО: 'пивасик', СКОКА})
const купиЧипсики = СКОКА => ({type: 'КУПИТЬ', ШО: 'чипсики', СКОКА})
const купиСиги = СКОКА => ({type: 'КУПИТЬ', ШО: 'сиги', СКОКА})
const купи = (ШО,СКОКА) => ({type: 'КУПИТЬ', ШО, СКОКА})
store.dispatch(купиЧипсики(0))
store.dispatch(купиПивасик(0))
store.dispatch(купиСиги(0))