import { html } from "../util.js";
import buttonCSS from "../buttonStyles.js";

const SORT_OPTIONS = [
  { value: "newest", label: "Newest" },
  { value: "oldest", label: "Oldest" },
  { value: "name", label: "Name" },
];

class PxmeToolbar extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    this._sortIndex = 0;
  }

  static get observedAttributes() {
    return ["sort"];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === "sort" && this._rendered) {
      this._sortIndex = SORT_OPTIONS.findIndex((o) => o.value === newValue);
      if (this._sortIndex < 0) this._sortIndex = 0;
      this._updateSortTitle();
    }
  }

  connectedCallback() {
    const initialSort = this.getAttribute("sort") || "newest";
    this._sortIndex = SORT_OPTIONS.findIndex((o) => o.value === initialSort);
    if (this._sortIndex < 0) this._sortIndex = 0;

    this.shadowRoot.innerHTML = html`
      <style>
        ${buttonCSS}
        :host {
          display: block;
        }

        :host([hidden]) {
          display: none;
        }

        .pxme-toolbar {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          gap: var(--pxme-space-md, 16px);
          padding: 0 var(--pxme-space-md, 16px);
        }

        .pxme-toolbar .pxme-btn--icon svg {
          width: var(--pxme-icon-size, 24px);
          height: var(--pxme-icon-size, 24px);
          /* Inherit the button's colour (grey in light, light-grey in dark) so
             toolbar icons never fall back to the SVG default black in dark mode. */
          fill: currentColor;
        }
      </style>
      <section class="pxme-toolbar">
        <slot></slot>
        <button class="pxme-btn pxme-btn--icon" id="sort-btn" aria-label="Sort by Newest">
          <svg viewBox="0 0 24 24" fill="currentColor">
            <path d="M3 18h6v-2H3v2zm0-5h12v-2H3v2zm0-7v2h18V6H3z" />
          </svg>
        </button>
      </section>
    `;

    this._rendered = true;

    const sortBtn = this.shadowRoot.querySelector("#sort-btn");
    sortBtn.addEventListener("click", () => {
      this._sortIndex = (this._sortIndex + 1) % SORT_OPTIONS.length;
      this._updateSortTitle();
      this.dispatchEvent(
        new CustomEvent("sort-change", {
          detail: { sort: SORT_OPTIONS[this._sortIndex].value },
          bubbles: true,
          composed: true,
        })
      );
    });
  }

  _updateSortTitle() {
    const btn = this.shadowRoot.querySelector("#sort-btn");
    if (btn) {
      btn.setAttribute("aria-label", `Sort by ${SORT_OPTIONS[this._sortIndex].label}`);
    }
  }

  get sort() {
    return SORT_OPTIONS[this._sortIndex].value;
  }
}

customElements.define("pxme-toolbar", PxmeToolbar);