const { HandlebarsApplicationMixin } = foundry.applications.api

export default class CelestopolItemSheet extends HandlebarsApplicationMixin(foundry.applications.sheets.ItemSheetV2) {
  /** @override */
  static DEFAULT_OPTIONS = {
    classes: ["fvtt-celestopol", "item"],
    position: { width: 580, height: "auto" },
    form: { submitOnChange: true },
    window: { resizable: true },
    actions: {
      editImage: CelestopolItemSheet.#onEditImage,
    },
  }

  /** Default tab group for item sheets */
  tabGroups = { "item-tabs": "description" }

  /** @override */
  async _prepareContext() {
    return {
      fields:       this.document.schema.fields,
      systemFields: this.document.system.schema.fields,
      item:         this.document,
      system:       this.document.system,
      source:       this.document.toObject(),
      isEditable:   this.isEditable,
      activeTab:    this.tabGroups["item-tabs"] ?? "description",
    }
  }

  /** @override */
  _onRender(context, options) {
    // Wire up tab navigation for inline item tabs
    this.element.querySelectorAll('.item-tabs [data-tab]').forEach(tabEl => {
      tabEl.addEventListener('click', () => {
        const group = "item-tabs"
        this.changeTab(tabEl.dataset.tab, group)
      })
    })
  }

  static async #onEditImage(event, _target) {
    const current = this.document.img
    const fp = new FilePicker({
      current,
      type: "image",
      callback: (path) => this.document.update({ img: path }),
      top:  this.position.top + 40,
      left: this.position.left + 10,
    })
    return fp.browse()
  }

}
