package hptracker

import "github.com/itsig0/tallytome/view/layout"
import "fmt"

type TrackerData struct {
    HP                  string
    HPBase              string
    HPStartPercentage   string
    HPPercentage        string
    Mana                string
    ManaBase            string
    ManaStartPercentage string
    ManaPercentage      string
    ManaRegen           string
}

type DamageData struct {
    Values string
    SavingThrow string
    Errors string
}

var dd = DamageData {
    Values: "",
    SavingThrow: "",
    Errors: "",
}

templ Show(hx bool, td TrackerData){
    @layout.Base(hx){
        <div class="container">

            <div class="grid mb-2">
                <div class="start">
                    <h2>Kampfrunde: </h2>
                </div>

                <div id="trackerBars" class="middle">
                    
                    @TrackerColumn(td)

                </div>

                <div class="text-right">
                    <button>Nächste Runde</button>
                </div>
            </div>

            // base stats go here
            @baseStats()

            <div class="grid">
                <div>
                    <h3>TP</h3>
                    @Hp(dd)
                </div>

                <div>
                    <h3>Mana</h3>
                    @Mana()
                </div>
            </div>
        </div>
        <script>
        document.addEventListener("DOMContentLoaded", (event) => {
            document.body.addEventListener("htmx:beforeSwap", function(evt){
                if (evt.detail.xhr.status === 422){
                    evt.detail.shouldSwap = true;
                    evt.detail.isError = false;
                }         
            });

            document.body.addEventListener("HPUpdated", function() {
                var input = document.getElementById('damageInput');
                input.value = "";
                input.removeAttribute('aria-invalid');

                var errorMessage = document.getElementById('damageError');
                if (errorMessage) {
                    errorMessage.parentNode.removeChild(errorMessage);
                }

                var savingthrow = document.getElementById('savingthrow');
                savingthrow.checked = false;
            });
        })

        </script>
    }
}

// css loading(percent string) {
// 	width: { fmt.Sprintf("%s%%", percent) };
// }

templ TrackerColumn(td TrackerData){

    <div id="hpBar" class="progress">
        @HPTracker(td)
    </div>

    <div id="manaBar" class="progress">
        @ManaTracker(td)
    </div>

}

templ HPTracker(td TrackerData){
    <span class="progress-label">TP: {td.HP}/{td.HPBase} </span>
    <div class={"hp", hpAnimation(td.HPStartPercentage, td.HPPercentage)} ></div>
}

templ ManaTracker(td TrackerData){
    <span class="progress-label">Mana: {td.Mana}/{td.ManaBase} </span>
    <div class={"mana", manaAnimation(td.ManaStartPercentage, td.ManaPercentage)}></div> 
}

css hpAnimation(from, to string) {
    --hp-from-width:{ fmt.Sprintf("%s%%", from) };
    --hp-to-width:{ fmt.Sprintf("%s%%", to) };
}

css manaAnimation(from, to string) {
    --mana-from-width:{ fmt.Sprintf("%s%%", from) };
    --mana-to-width:{ fmt.Sprintf("%s%%", to) };
}

templ baseStats(){
    <details open>
        <summary>Standard Werte</summary>
        <form class="grid" hx-post="/hp-mana-tracker/update" hx-target="#trackerBars">

            <label>
                Trefferpunkte
                <input
                    type="number"
                    placeholder="Trefferpunkte"
                    name="hp"
                    required
                />
            </label>

            <label>
                Mana <input type="number" name="mana" placeholder="Mana" required/>
            </label>

            <label>
                Regenerations %
                <input
                    type="number"
                    name="manaregen"
                    placeholder="Regenerations %"
                    required
                />
            </label>

            <div class="lbl-offset">
                <button type="submit">
                    Go
                </button>
            </div>
        </form>
    </details>
}

templ Hp(dd DamageData){

    <form id="damageInputs" hx-post="/hp-mana-tracker/damage" hx-target="#hpBar">

        <fieldset role="group">

            <button class="secondary" name="damage" value="true">
                -
            </button>

            
                <input 
                    id="damageInput" 
                    name="damageInput" 
                    type="number" 
                    placeholder="Schaden/Heilung"
                    required
                    if dd.Errors != "" {
                        aria-invalid="true" 
                    }
                    value={dd.Values}
                />

            <button class="secondary" name="heal" value="true">
                +
            </button>

        </fieldset>
        if dd.Errors != "" {
            <small id="damageError" class="error-helper">{dd.Errors}</small>
        }
       
    
        <fieldset>
            <label for="savingthrow">
                <input id="savingthrow" name="savingthrow" type="checkbox" role="switch" 
                if dd.SavingThrow != "" {
                    checked
                }
                />
                Verteidigungswurf
            </label>
        </fieldset>
    </form>
}

templ Mana(){
    <form hx-post="/hp-mana-tracker/mana" hx-target="#manaBar">
        <fieldset role="group">

            <button class="secondary" name="use">
                -
            </button>

            <input name="manaInput" type="number" placeholder="" min="0" value="0"/>

            <button class="secondary" name="add">
                +
            </button>

        </fieldset>
    </form>
   
}