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 createDom (state) {
    let content = document.getElementById('content')
    content.innerHTML = ''
    let spanBeerAmount = document.createElement('span')
    spanBeerAmount = `Цена - ${state.пиво.БАБЛО} грн | В наличии:${state.пиво.СКОКА} шт.`
    let spanImgBeer = document.createElement('span')
    let imgBeer = document.createElement('img')
    imgBeer.src = "https://www.meme-arsenal.com/memes/a47737a30a10732b77d522f44f43ea3d.jpg"
    spanImgBeer.append(imgBeer)
    imgBeer.style.width = '200px'
    content.append(spanImgBeer)
    content.append(spanBeerAmount)
    
    let spanChipsAmount = document.createElement('span')
    spanChipsAmount = `Цена = ${state.чипсы.БАБЛО} грн | В наличии: ${state.чипсы.СКОКА} пачек`
    let spanImgChips = document.createElement('span')
    spanImgChips.style.marginLeft = '50px'
    let imgChips = document.createElement('img')
    imgChips.src = "chips.png"
    imgChips.style.width = '150px'
    imgChips.style.marginRight = '30px'
    spanImgChips.append(imgChips)
    content.append(spanImgChips)
    content.append(spanChipsAmount)
    
    let spanCigarettesAmount = document.createElement('span')
    spanCigarettesAmount = `Цена: ${state.сиги.БАБЛО} грн | В наличии: ${state.сиги.СКОКА} пачек`
    let spanImgCigarettes = document.createElement('span')
    let imgCigarettes = document.createElement('img')
    imgCigarettes.src = 'cigi.png'
    imgCigarettes.style.width = '200px'
    spanImgCigarettes.style.marginLeft = '10px'
    spanImgCigarettes.append(imgCigarettes)
    content.append(spanImgCigarettes)
    content.append(spanCigarettesAmount)

    
    let cashbox = document.createElement('span')
    let cashboxImg = document.createElement('img')
    cashboxImg.src = "kassa.png"
    cashboxImg.style.width = '200px'
    cashboxImg.style.position = 'relative'
    cashboxImg.style.top = '60px'
    cashboxImg.style.left = '50px'
    cashbox.style.position = 'relative' 
    cashbox.style.top = '5px'
    cashbox.style.left = '100px'
    cashbox.innerHTML = `В кассе: ${state.касса} грн. `
    content.append(cashboxImg)
    content.append(cashbox)
    
    let btnCashbox = document.createElement('button')
    btnCashbox.innerHTML = "Посмотреть сколько в кассе"
    btnCashbox.style.marginLeft = '80px'
    content.append(btnCashbox)

    let btnHidden = document.createElement('button')
    btnHidden.hidden = true
    btnHidden.innerHTML = 'Скрыть'
    btnHidden.style.position = 'relative'
    btnHidden.style.top = '40px'
    btnHidden.style.left = '20px'
    content.append(btnHidden)
    
    cashbox.hidden = true
    btnCashbox.hidden = false
    
    btnCashbox.onclick = () => {
        alert ("Только для продавщицы!!!")
        let password = prompt('Введите пароль для продавщицы')
        if (password == 'qwerty'){
        cashbox.hidden = false
        btnCashbox.hidden = true
        btnHidden.hidden = false}
        else {
            alert ("Куда лезешь?")
        }
    }

    btnHidden.onclick = () => {
        cashbox.hidden = true
        btnCashbox.hidden = false
        btnHidden.hidden = true
    }
    
    let selectProducts = document.createElement('select')
    content.append(selectProducts)
    selectProducts.style.marginLeft = '300px'
    let option = document.createElement('option')
    option.innerHTML = 'Выберите продукт'
    selectProducts.append(option) 
    let inputAmount = document.createElement('input')
    inputAmount.type = 'number'
    content.append(inputAmount)
    inputAmount.style.marginLeft = '20px'
    inputAmount.placeholder = 'Количество товара'

    let beer = document.createElement('option')
    beer.innerHTML = 'пиво'
    selectProducts.append(beer)

    let chips = document.createElement('option')
    chips.innerHTML = 'чипсы'
    selectProducts.append(chips)

    let cigarettes = document.createElement('option')
    cigarettes.innerHTML = 'сиги'
    selectProducts.append(cigarettes)
    
    let btn = document.createElement('button')
    content.append(btn)
    btn.innerHTML = 'Купить'
    btn.style.marginLeft = '20px'
    
    btn.onclick = () => {
        if(state[selectProducts.value].СКОКА >= inputAmount.value){
        let amount = inputAmount.value
        let selectNum = selectProducts.value
        
        store.dispatch(купиШото(amount,selectNum))
        }
        else {
            alert('В наличие столько нету!')
        }
    }
    return state
}
function reducer(state, {type, ШО, СКОКА,БАБЛО}){
    if (!state){
        return {
            пиво: {СКОКА:100,БАБЛО:60},
            чипсы: {СКОКА:100,БАБЛО:30},
            сиги: {СКОКА:100 , БАБЛО:50},
            касса: 0
        }
    }
    if (type === 'КУПИТЬ'){
        return {
            ...state,
            [ШО]: {...state[ШО], СКОКА: state[ШО].СКОКА - СКОКА },
            касса: state[ШО].БАБЛО * СКОКА + state.касса
        }
    }

    return state
}

const store = createStore(reducer)
const unsubscribe2 = store.subscribe(() => console.log('подписчик 2', store.getState()))
const shop = store.subscribe(() => createDom(store.getState()))
const купиПиво = СКОКА => ({type: 'КУПИТЬ', ШО: "пиво", СКОКА})
const купиЧипсы = СКОКА => ({type: 'КУПИТЬ', ШО: "чипсы", СКОКА})
const купиСиги = СКОКА => ({type: 'КУПИТЬ', ШО: "сиги", СКОКА})
const купиШото = (СКОКА,ШО) => ({type: 'КУПИТЬ', ШО, СКОКА})
store.dispatch(купиПиво(0))
store.dispatch(купиЧипсы(0))
store.dispatch(купиСиги(0))