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 myoButton
    on click from me
        set $myoItem to {}
        then set $myoItem.type to 'custom'
        then set $myoItem.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 $myoSize is not undefined and $myoVariant is not undefined and $myoShape is not undefined and $myoCap 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 $familyCounter >= 1
                set @data-state to 'enabled'
            end

        else if $currentStep is 2
            set @data-state to 'disabled'
            if $ingredientCounter >= 3
                set @data-state to 'enabled'
            end

        else if $currentStep is 3
            set @data-state to 'disabled'
            if $genderValue exists
                set @data-state to 'enabled'
            end

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

        else if $currentStep is 5
            set @data-state to 'disabled'
        end

    on click from me
        if $currentStep is 0
            set $currentBottle to 0
            then set $myoItem.size to `${$myoSize}ml`
            then set $myoItem.variant to $myoVariant
            then set $myoItem.shape to $myoShape
            then set $myoItem.cap to $myoCap
            then set tempCounter to 1
            repeat $bottleTotal times index i
                set $myoItem.bottles[i] to {}
                then set $myoItem.bottles[i].bottleNumber to tempCounter
                then set $myoItem.bottles[i].bottleName to `Bottle ${tempCounter}`
                then set $myoItem.bottles[i].family to []
                then set $myoItem.bottles[i].familyIds to []
                then set $myoItem.bottles[i].ingredients to []
                then set $myoItem.bottles[i].ingredientsAlt to []
                then set $myoItem.bottles[i].ingredientsIds to []
                then set $myoItem.bottles[i].gender to ''
                then set $myoItem.bottles[i].genderMeaning to ''
                then set $myoItem.bottles[i].recommendations to []
                then increment tempCounter
            end
            then add .hidden to #step-start
            then remove .scrollable from #step-container
            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
            append @data-family of .selected in #step1 to $myoItem.bottles[$currentBottle].family
            append @data-family-id of .selected in #step1 to $myoItem.bottles[$currentBottle].familyIds
            then set selectedFamilies to @data-family-alt of .selected in #step1
            then set $selectedFamiliesData to []
            then set $recommendationsData to []
            for selectedFamily in selectedFamilies
                append window[selectedFamily + 'Data'] to $selectedFamiliesData
            end
            for familyData in $selectedFamiliesData
                append familyData.recommendations to $recommendationsData
            end
            set $ingredientsToShow to []
            if $selectedFamiliesData.length == 1
                set $selectedFamily1 to $selectedFamiliesData[0].id
                for fragrance in $selectedFamiliesData[0].fragrances
                    set ingredients to fragrance.ingredients
                    for family in fragrance.families
                        if family is $selectedFamily1
                            for ingredient in ingredients
                                if no ingredient in $ingredientsToShow
                                    append ingredient to $ingredientsToShow
                                    then log 'added by route 1'
                                end
                            end
                        end
                    end
                end
                set MYOIngredients to the children of #step2
                for ingredient in $ingredientsToShow
                    for item in MYOIngredients
                        if @data-ingredient-id of item is ingredient
                            add .enabled to item
                        end
                    end
                end
            end
            if $selectedFamiliesData.length == 2
                set $selectedFamily1 to $selectedFamiliesData[0].id
                set $selectedFamily2 to $selectedFamiliesData[1].id
                set $selectedFragrancesList1 to $selectedFamiliesData[0].fragrances
                set $selectedFragrancesList2 to $selectedFamiliesData[1].fragrances
                for fragrance in $selectedFragrancesList1
                    set families to fragrance.families
                    set ingredients to fragrance.ingredients
                    if families.includes($selectedFamily1) and families.includes($selectedFamily2)
                        for ingredient in ingredients
                            if no ingredient in $ingredientsToShow
                                append ingredient to $ingredientsToShow
                                then log 'added by route 2'
                            end
                        end
                    end
                end
                for fragrance in $selectedFragrancesList2
                    set families to fragrance.families
                    set ingredients to fragrance.ingredients
                    if families.includes($selectedFamily1) and families.includes($selectedFamily2)
                        for ingredient in ingredients
                            if no ingredient in $ingredientsToShow
                                append ingredient to $ingredientsToShow
                                then log 'added by route 2'
                            end
                        end
                    end
                end
                if $ingredientsToShow.length == 0
                    for fragrance in $selectedFragrancesList1
                        set families to fragrance.families
                        set ingredients to fragrance.ingredients
                        for family in families
                            if families.includes($selectedFamily1)
                                for ingredient in ingredients
                                    if no ingredient in $ingredientsToShow
                                        append ingredient to $ingredientsToShow
                                        then log 'added by route 3'
                                    end
                                end
                            end
                        end
                    end
                    for fragrance in $selectedFragrancesList2
                        set families to fragrance.families
                        set ingredients to fragrance.ingredients
                        for family in families
                            if families.includes($selectedFamily2)
                                for ingredient in ingredients
                                    if no ingredient in $ingredientsToShow
                                        append ingredient to $ingredientsToShow
                                        then log 'added by route 3'
                                    end
                                end
                            end
                        end
                    end
                end
                set MYOIngredients to the children of #step2
                for ingredient in $ingredientsToShow
                    for item in MYOIngredients
                        if @data-ingredient-id of item is ingredient
                            add .enabled to item
                        end
                    end
                end

            end
            then add .hidden to #step1
            then remove .hidden from #step2
            then set $familyCounter to 0
            then remove .selected from .family in #step1
            then call stepper(1, '#step1', 2, '#step2', 3, '#step3')
            then send stepStatus to #next
            then send titleEvent to #step-title
            then send bottleCounter to #counting-pill

        else if $currentStep is 2
            append @data-ingredient of .selected in #step2 to $myoItem.bottles[$currentBottle].ingredients
            append @data-ingredient-alt of .selected in #step2 to $myoItem.bottles[$currentBottle].ingredientsAlt
            append @data-ingredient-id of .selected in #step2 to $myoItem.bottles[$currentBottle].ingredientsIds
            for fragranceList in $recommendationsData
                for fragrance in fragranceList
                    set fragranceID to fragrance.id
                    set fragranceIngredients to fragrance.ingredients
                    set fragranceFamilies to fragrance.families
                    set fragranceMYO to fragrance.myo
                    set fragranceName to fragrance.name
                    if fragranceMYO is true
                        if fragranceFamilies.includes($selectedFamily1) and fragranceFamilies.includes($selectedFamily2)
                            for ingredient in $myoItem.bottles[$currentBottle].ingredientsIds[0]
                                for thing in fragranceIngredients
                                    if thing is ingredient
                                        if no fragranceID in $myoItem.bottles[$currentBottle].recommendations
                                            append fragranceID to $myoItem.bottles[$currentBottle].recommendations
                                        end
                                    end
                                end
                            end
                        end
                    end
                end
            end
            then add .hidden to #step2
            then remove .hidden from #step3
            then set $ingredientCounter to 0
            then remove .selected from .ingredient in #step2
            then call stepper(2, '#step2', 3, '#step3', 4, '#step4')
            then send stepStatus to #next
            then send titleEvent to #step-title
            then send bottleCounter to #counting-pill

        else if $currentStep is 3
            set $myoItem.bottles[$currentBottle].gender to $genderValue
            then set $myoItem.bottles[$currentBottle].genderMeaning to $genderValueMeaning
            then add .hidden to #step3
            then remove .hidden from #step4
            then remove .hidden from #skip
            then set $genderValue to null
            then set $genderValueMeaning to null
            then set value of #range in #step3 to 30
            then set $currentPrice to innerHTML of #price
            then js $currentPrice = $currentPrice.replace('₹', '') end
            then set $futurePrice to $currentPrice as Number + $myoEngravingCost as Number
            then call stepper(3, '#step3', 4, '#step4', 1, '#step1')
            then send stepStatus to #next
            then send titleEvent to #step-title
            then send bottleCounter to #counting-pill

        else if $currentStep is 4
            if $skip is 'yes'
                set $myoItem.bottles[$currentBottle].engraving to 'No'
            else if $myoEngravingChars is not undefined and $myoEngravingChars is not '' and $skip is undefined
                then set $myoItem.bottles[$currentBottle].engraving to 'Yes'
                then set $myoItem.bottles[$currentBottle].engravingCost to $myoEngravingCost
                then set $myoItem.bottles[$currentBottle].engravingFont to $myoEngravingFont
                then set $myoItem.bottles[$currentBottle].engravingChars to $myoEngravingChars
                then set $myoPrice to $myoPrice + $myoEngravingCost
                then send priceCheck to #price in #price-label
            end

            then add .hidden to #step4
            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
            then set $myoEngravingChars to undefined
            then set $myoEngravingFont to my undefined
            then remove .selected from .option in #step4
            then set value of #input-field 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(4, '#step4', 5, '#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 $myoItem.variant is 'Only 1'
                    set cardVariant to ' bottle'
                else if $myoItem.variant is 'Box of 2'
                    set cardVariant to ' box of 2'
                else if $myoItem.variant is 'Box of 5'
                    set cardVariant to ' box of 5'
                end

                repeat $bottleTotal times index i
                    if $myoItem.variant is 'Only 1'
                        set cardVariantTag to 'Your Pick'
                    else if $myoItem.variant is 'Box of 2'
                        set cardVariantTag to `Bottle ${tempCounter2}`
                    else if $myoItem.variant is 'Box of 5'
                        set cardVariantTag to `Bottle ${tempCounter2}`
                    end
                    set family1 to $myoItem.bottles[i].family[0][0]
                    then set family2 to `, ${$myoItem.bottles[i].family[0][1]}`
                    then set ingredient1 to $myoItem.bottles[i].ingredientsAlt[0][0]
                    then set ingredient2 to $myoItem.bottles[i].ingredientsAlt[0][1]
                    then set ingredient3 to $myoItem.bottles[i].ingredientsAlt[0][2]
                    then set ingredient4 to $myoItem.bottles[i].ingredientsAlt[0][3]
                    then set ingredient5 to $myoItem.bottles[i].ingredientsAlt[0][4]
                    then set ingredient6 to $myoItem.bottles[i].ingredientsAlt[0][5]
                    then set ingredient1Name to $myoItem.bottles[i].ingredients[0][0]
                    then set ingredient2Name to $myoItem.bottles[i].ingredients[0][1]
                    then set ingredient3Name to $myoItem.bottles[i].ingredients[0][2]
                    then set ingredient4Name to $myoItem.bottles[i].ingredients[0][3]
                    then set ingredient5Name to $myoItem.bottles[i].ingredients[0][4]
                    then set ingredient6Name to $myoItem.bottles[i].ingredients[0][5]
                    if no ingredient1
                        set ingredient1Class to 'hidden'
                    else
                        set ingredient1Class to ''
                    end
                    if no ingredient2
                        set ingredient2Class to 'hidden'
                    else
                        set ingredient2Class to ''
                    end
                    if no ingredient3
                        set ingredient3Class to 'hidden'
                    else
                        set ingredient3Class to ''
                    end
                    if no ingredient4
                        set ingredient4Class to 'hidden'
                    else
                        set ingredient4Class to ''
                    end
                    if no ingredient5
                        set ingredient5Class to 'hidden'
                    else
                        set ingredient5Class to ''
                    end
                    if no ingredient6
                        set ingredient6Class to 'hidden'
                    else
                        set ingredient6Class to ''
                    end
                    if $myoItem.bottles[i].engraving is 'Yes'
                        set cardEngravingFont to $myoItem.bottles[i].engravingFont
                        set cardEngraving to $myoItem.bottles[i].engravingChars
                    else if $myoItem.bottles[i].engraving is 'No'
                        set cardEngravingFont to 'Josefin Sans'
                        set cardEngraving to '—'
                    end
                    if $myoItem.bottles[i].gender is '0'
                        set gender to '🌖'
                    else if $myoItem.bottles[i].gender is '10'
                        set gender to '🌗'
                    else if $myoItem.bottles[i].gender is '20'
                        set gender to '🌘'
                    else if $myoItem.bottles[i].gender is '30'
                        set gender to '🌑'
                    else if $myoItem.bottles[i].gender is '40'
                        set gender to '🌒'
                    else if $myoItem.bottles[i].gender is '50'
                        set gender to '🌓'
                    else if $myoItem.bottles[i].gender is '60'
                        set gender to '🌔'
                    end
                    append `
                        <div class="bottle-card">
                            <div class="variant-tag">
                                ${cardVariantTag}
                            </div>
                            <div class="variant-title">
                                A <span>${$myoItem.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-${$myoShape}.png" />
                                    </div>
                                </div>
                                <div class="cap">
                                    <div class="title">The Cap:</div>
                                    <div class="image">
                                        <img src="assets/img/templates/make-your-own/caps/${$myoCap}.png" />
                                    </div>
                                </div>
                            </div>
                            <div class="internal">
                                <div class="title">The Ingredients:</div>
                                <div class="ingredients">
                                    <div class="ingredient ${ingredient1Class}">
                                        <img class="${ingredient1Class}" src="assets/img/templates/make-your-own/ingredients/${ingredient1}.jpg" />
                                        <div>${ingredient1Name}</div>
                                    </div>
                                    <div class="ingredient ${ingredient2Class}">
                                        <img class="${ingredient2Class}" src="assets/img/templates/make-your-own/ingredients/${ingredient2}.jpg" />
                                        <div>${ingredient2Name}</div>
                                    </div>
                                    <div class="ingredient ${ingredient3Class}">
                                        <img class="${ingredient3Class}" src="assets/img/templates/make-your-own/ingredients/${ingredient3}.jpg" />
                                        <div>${ingredient3Name}</div>
                                    </div>
                                    <div class="ingredient ${ingredient4Class}">
                                        <img class="${ingredient4Class}" src="assets/img/templates/make-your-own/ingredients/${ingredient4}.jpg" />
                                        <div>${ingredient4Name}</div>
                                    </div>
                                    <div class="ingredient ${ingredient5Class}">
                                        <img class="${ingredient5Class}" src="assets/img/templates/make-your-own/ingredients/${ingredient5}.jpg" />
                                        <div>${ingredient5Name}</div>
                                    </div>
                                    <div class="ingredient ${ingredient6Class}">
                                        <img class="${ingredient6Class}" src="assets/img/templates/make-your-own/ingredients/${ingredient6}.jpg" />
                                        <div>${ingredient6Name}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="more-container">
                                <div class="more-item">
                                    <div class="title">Family:</div>
                                    <div class="content">${family1}${family2}</div>
                                </div>
                                <div class="more-item">
                                    <div class="title">Gender:</div>
                                    <div class="content">${gender}</div>
                                </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 remove .hidden from #step1
                then call stepper(4, '#step4', 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 $myoItem.uuid to `brewery-custom-${$uuid}`
            then set $myoItem.price to $myoPrice
            then append $myoItem to $cartItems
            then set $cartTotal to $cartTotal + $myoItem.price
            then set localStorage['cartItems'] to $cartItems as JSON
            then set localStorage['cartTotal'] to $cartTotal
            then send addtocart(type:'custom') 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 1s
        then add .with-post-review-graphic to #steps
        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 remove .nope from #part-1 then remove .hidden from #part-1 then settle
        then wait 2s
        then remove .with-post-review-graphic from #steps
        then add .hidden to #part-1 then settle then add .nope to #part-1
        then wait 1s
        then remove .nope from #part-2 then remove .hidden from #part-2 then settle
end