const { HandlebarsApplicationMixin } = foundry.applications.api

/**
 * Base actor sheet for Ecryme using Application V2.
 * Provides common drag-drop, image editing, and shared structure.
 */
export default class EcrymeBaseActorSheet extends HandlebarsApplicationMixin(foundry.applications.sheets.ActorSheetV2) {

  constructor(options = {}) {
    super(options)
    this.#dragDrop = this.#createDragDropHandlers()
  }

  #dragDrop

  /** @override */
  static DEFAULT_OPTIONS = {
    classes: ["fvtt-ecryme", "sheet", "actor"],
    position: {
      width: 860,
      height: 680,
    },
    form: {
      submitOnChange: true,
    },
    window: {
      resizable: true,
    },
    dragDrop: [{ dragSelector: ".item-list .item[data-item-id]", dropSelector: null }],
    actions: {
      editImage: EcrymeBaseActorSheet.#onEditImage,
    },
  }

  /** @override */
  _onRender(context, options) {
    this.#dragDrop.forEach((d) => d.bind(this.element))
  }

  // #region Drag-and-Drop
  #createDragDropHandlers() {
    return this.options.dragDrop.map((d) => {
      d.permissions = {
        dragstart: this._canDragStart.bind(this),
        drop: this._canDragDrop.bind(this),
      }
      d.callbacks = {
        dragstart: this._onDragStart.bind(this),
        dragover: this._onDragOver.bind(this),
        drop: this._onDrop.bind(this),
      }
      return new foundry.applications.ux.DragDrop.implementation(d)
    })
  }

  _canDragStart(selector) { return this.isEditable }
  _canDragDrop(selector) { return this.isEditable && this.document.isOwner }
  _onDragStart(event) {}
  _onDragOver(event) {}
  async _onDrop(event) {}
  // #endregion

  // #region Actions
  static async #onEditImage(event, target) {
    const attr = target.dataset.edit
    const current = foundry.utils.getProperty(this.document, attr)
    const { img } = this.document.constructor.getDefaultArtwork?.(this.document.toObject()) ?? {}
    const fp = new FilePicker({
      current,
      type: "image",
      redirectToRoot: img ? [img] : [],
      callback: (path) => {
        this.document.update({ [attr]: path })
      },
      top: this.position.top + 40,
      left: this.position.left + 10,
    })
    return fp.browse()
  }
  // #endregion
}