package views

type Post struct {
    ID      string
    Content string
    Author  string
    Date    string
}

type Reaction struct {
    ID          string
    Label       string
    Count       string
    JustChanged bool
}

type PostStats struct {
    PostID    string
    Views     PostViews
    Reactions []Reaction
}

type PostViews struct {
    Count       string
    JustChanged bool
}

templ Index(posts []Post) {
    @base() {
        @Posts(posts)
    }
}

templ Posts(posts []Post) {
    <div class="row" id="main">
        for _, p := range posts {
            @postView(p)
        }

        <div hx-get="/idle" hx-trigger="load delay:600s" hx-target="#main" hx-swap="outerHTML" ></div>
    </div>
}

templ Idle() {
    <div class="row" id="main">
        <div class="card mb-3">
            <div class="card-body">
                <h5 class="card-title mb-2">Paused to save resources. 🫢</h5>

                <h5 class="card-title mb-1">Still around?</h5>

                <button
                    class="btn btn-outline-secondary m-1"
                    hx-get="/posts"
                    hx-target="#main"
                    hx-swap="outerHTML"
                >
                    Reload
                </button>
            </div>
        </div>
    </div>
}

templ postView(post Post) {
    <div class="card mb-3">
      <div class="card-body">
        <div class="d-flex justify-content-between align-items-center mb-2">
          <div>
            <h5 class="card-title mb-0">{ post.Author }</h5>
            <div class="d-flex align-items-center">
              <small class="text-muted me-2">{ post.Date }</small>
            </div>
          </div>
        </div>
        <p class="card-text">{ post.Content }</p>
        <div hx-ext="sse" sse-connect={ "/posts/" + post.ID + "/stats" } sse-swap="data"></div>
      </div>
    </div>
}

templ PostStatsView(stats PostStats) {
    <div class={ "d-flex", "align-items-center", templ.KV("animated", stats.Views.JustChanged)}>
        <span class="me-1">👁️</span>
        <small class="text-muted">{ stats.Views.Count + " views" }</small>
    </div>

    <div class="mt-2 d-flex justify-content-start align-items-center">
        <div class="reaction-buttons">
            for _, r := range stats.Reactions {
                @reactionButton(stats.PostID, r)
            }
        </div>
    </div>
}

templ reactionButton(postID string, reaction Reaction) {
    <form hx-post={ "/posts/" + postID + "/reactions"} hx-swap="outerHTML">
        <input type="hidden" name="reaction_id" value={ reaction.ID } />
        <button type="submit" class={"btn", "btn-outline-secondary", "m-1", templ.KV("animated", reaction.JustChanged)}>
          <span class="emoji">{ reaction.Label }</span>
          <span class="counter">{ reaction.Count }</span>
        </button>
    </form>
}

templ UpdatedButton(label string) {
    <button class={"btn", "btn-outline-secondary", "m-1" } disabled>
      <span class="emoji">{ label }</span>
      <span class="counter">✅</span>
    </button>
}