def stepper(prevNum, prevID, currNum, currID, nextNum, nextID)
    set $prevStep to prevNum
    then set $prevStepID to prevID
    then set $currentStep to currNum
    then set $currentStepID to currID
    then set $nextStep to nextNum
    then set $nextStepID to nextID
end

behavior rybButton
    on click from me
        set $rybItem to {}
        then set $rybItem.type to 'reorder'
        then set $rybItem.bottles to []
        then set $currentStep to 0
        then wait 0.5s
        then remove .nope from #step-title then remove .hidden from #step-title
        then remove .nope from #step-container then remove .hidden from #step-container
        then remove .nope from #step-buttons then remove .hidden from #step-buttons
        then send titleEvent to #step-title
end

behavior checkStatus()
    on stepStatus
        if $currentStep is 0
            if $rybSize is not undefined and $rybVariant is not undefined and $rybShape is not undefined and $rybCap is not undefined
                set @data-state to 'enabled'
            end

        else if $currentStep is 1
            then set @data-state to 'disabled'
            then set my innerHTML to 'Next'
            if $blendNameChars is not undefined and $blendNameChars is not ''
                set @data-state to 'enabled'
            end

        else if $currentStep is 2
            set @data-state to 'disabled'
            then add .add to #next
            then set innerHTML of #next to 'Add'
            if $rybEngravingChars is not undefined and $rybEngravingChars is not ''
                set @data-state to 'enabled'
            end
        else if $currentStep is 3
            set @data-state to 'disabled'
        end

    on click from me
        if $currentStep is 0
            set $currentBottle to 0
            then set $rybItem.size to `${$rybSize}ml`
            then set $rybItem.variant to $rybVariant
            then set $rybItem.shape to $rybShape
            then set $rybItem.cap to $rybCap
            then set tempCounter to 1
            repeat $bottleTotal times index i
                set $rybItem.bottles[i] to {}
                then set $rybItem.bottles[i].bottleNumber to tempCounter
                then set $rybItem.bottles[i].bottleName to `Bottle ${tempCounter}`
                then set $rybItem.bottles[i].bottleBlend to ''
                then increment tempCounter
            end
            then add .hidden to #step-start
            then remove .scrollable from #step-container
            then add .add-graphic to #steps-main
            then remove .hidden from #steps-main
            then remove .hidden from #step1
            then call stepper(0, '#step-start', 1, '#step1', 2, '#step2')
            then send stepStatus to #next
            then send titleEvent to #step-title
            then send bottleCounter to #counting-pill

        else if $currentStep is 1
            set $rybItem.bottles[$currentBottle].bottleBlend to $blendNameChars
            then remove .add-graphic from #steps-main
            then add .hidden to #step1
            then remove .hidden from #step2
            then remove .hidden from #skip
            then set $blendNameChars to null
            then set value of #input-field-1 to ''
            then set $currentPrice to innerHTML of #price
            then js $currentPrice = $currentPrice.replace('₹', '') end
            then set $futurePrice to $currentPrice as Number + $rybEngravingCost as Number
            then call stepper(1, '#step1', 2, '#step2', 1, '#step1')
            then send stepStatus to #next
            then send titleEvent to #step-title
            then send bottleCounter to #counting-pill

        else if $currentStep is 2
            if $skip is 'yes'
                set $rybItem.bottles[$currentBottle].engraving to 'No'
            else if $rybEngravingChars is not undefined and $rybEngravingChars is not '' and $skip is undefined
                then set $rybItem.bottles[$currentBottle].engraving to 'Yes'
                then set $rybItem.bottles[$currentBottle].engravingCost to $rybEngravingCost
                then set $rybItem.bottles[$currentBottle].engravingFont to $rybEngravingFont
                then set $rybItem.bottles[$currentBottle].engravingChars to $rybEngravingChars
                then set $rybPrice to $rybPrice + $rybEngravingCost
                then send priceCheck to #price in #price-label
            end

            then add .hidden to #step2
            then add .hidden to #skip
            then set $skip to undefined
            then set innerHTML of #next to 'Next'
            then remove .add from #next
            then add @disabled to #input-field-2
            then set $rybEngravingChars to undefined
            then set $rybEngravingFont to my undefined
            then remove .selected from .option in #step2
            then set value of #input-field-2 to ''

            if $currentBottle + 1 is $bottleTotal
                increment $currentBottle
                then add .hidden to #steps-main
                then add .hidden to #next
                then remove .hidden from #step-review
                then remove .hidden from #done
                then call stepper(2, '#step2', 3, '#step-review', null, null)
                then send stepStatus to #next
                then send titleEvent to #step-title
                then send bottleCounter to #counting-pill

                then set tempCounter2 to 1

                if $rybItem.variant is 'Only 1'
                    set cardVariant to ' bottle'
                else if $rybItem.variant is 'Box of 2'
                    set cardVariant to ' box of 2'
                else if $rybItem.variant is 'Box of 5'
                    set cardVariant to ' box of 5'
                end

                repeat $bottleTotal times index i
                    if $rybItem.variant is 'Only 1'
                        set cardVariantTag to 'Your Pick'
                    else if $rybItem.variant is 'Box of 2'
                        set cardVariantTag to `Bottle ${tempCounter2}`
                    else if $rybItem.variant is 'Box of 5'
                        set cardVariantTag to `Bottle ${tempCounter2}`
                    end
                    set blendName to $rybItem.bottles[i].bottleBlend
                    if $rybItem.bottles[i].engraving is 'Yes'
                        set cardEngravingFont to $rybItem.bottles[i].engravingFont
                        set cardEngraving to $rybItem.bottles[i].engravingChars
                    else if $rybItem.bottles[i].engraving is 'No'
                        set cardEngravingFont to 'Josefin Sans'
                        set cardEngraving to '—'
                    end
                    append `
                        <div class="bottle-card">
                            <div class="variant-tag">
                                ${cardVariantTag}
                            </div>
                            <div class="variant-title">
                                A <span>${$rybItem.size}</span>${cardVariant}
                            </div>
                            <div class="external">
                                <div class="bottle">
                                    <div class="title">The Bottle:</div>
                                    <div class="image">
                                        <img src="assets/img/templates/make-your-own/bottles/bottle-${$rybShape}.png" />
                                    </div>
                                </div>
                                <div class="cap">
                                    <div class="title">The Cap:</div>
                                    <div class="image">
                                        <img src="assets/img/templates/make-your-own/caps/${$rybCap}.png" />
                                    </div>
                                </div>
                            </div>
                            <div class="blend-details">
                                <div class="title">Blend Name:</div>
                                <div class="content">${blendName}</div>
                            </div>
                            <div class="extra">
                                <div class="title">Engraving:</div>
                                <div class="engraving ${cardEngravingFont}">${cardEngraving}</div>
                            </div>
                        </div>
                    ` to #card-container in #step-review
                    then increment tempCounter2
                end
            else
                increment $currentBottle
                then add .add-graphic to #steps-main
                then remove .hidden from #step1
                then call stepper(2, '#step2', 1, '#step1', 2, '#step2')
                then send stepStatus to #next
                then send titleEvent to #step-title
                then send bottleCounter to #counting-pill
            end
        end
end

behavior reviewDone()
    on click from me
        if localStorage
            set $uuid to self.crypto.randomUUID()
            then set $cartItems to localStorage['cartItems'] as Object
            then set $cartTotal to localStorage['cartTotal'] as Number
            then set $rybItem.uuid to `brewery-reorder-${$uuid}`
            then set $rybItem.price to $rybPrice
            then append $rybItem to $cartItems
            then set $cartTotal to $cartTotal + $rybItem.price
            then set localStorage['cartItems'] to $cartItems as JSON
            then set localStorage['cartTotal'] to $cartTotal
            then send addtocart(type:'reorder') to window
        end
        then add .hidden to #step-review
        then add .hidden to #step-title
        then add .hidden to #step-container
        then add .hidden to #step-buttons
        then wait 500ms
        then add .nope to #step-title
        then add .nope to #step-container
        then add .nope to #step-buttons
        then remove .hidden from #step-finish
        then wait 500ms
        then remove .nope from #part-2 then remove .hidden from #part-2 then settle
end