import { SYSTEM } from "../../config/system.mjs"

const { HandlebarsApplicationMixin } = foundry.applications.api

export default class AwEItemSheet extends HandlebarsApplicationMixin(foundry.applications.sheets.ItemSheetV2) {
  /**
   * Different sheet modes.
   * @enum {number}
   */
  static SHEET_MODES = { EDIT: 0, PLAY: 1 }

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

  #dragDrop

  /** @override */
  static DEFAULT_OPTIONS = {
    classes: ["awemmy", "item"],
    position: {
      width: 600,
      height: "auto"
    },
    form: {
      submitOnChange: true
    },
    window: {
      resizable: true
    },
    dragDrop: [{ dragSelector: "[data-drag]", dropSelector: null }],
    actions: {
      toggleSheet: AwEItemSheet.#onToggleSheet,
      editImage: AwEItemSheet.#onEditImage,
      addTrait: AwEItemSheet.#onAddTrait,
      removeTrait: AwEItemSheet.#onRemoveTrait
    }
  }

  /**
   * The current sheet mode.
   * @type {number}
   */
  _sheetMode = this.constructor.SHEET_MODES.PLAY

  /**
   * Is the sheet currently in 'Play' mode?
   * @type {boolean}
   */
  get isPlayMode() {
    return this._sheetMode === this.constructor.SHEET_MODES.PLAY
  }

  /**
   * Is the sheet currently in 'Edit' mode?
   * @type {boolean}
   */
  get isEditMode() {
    return this._sheetMode === this.constructor.SHEET_MODES.EDIT
  }

  /** @override */
  async _prepareContext() {
    const context = await super._prepareContext()
    context.fields = this.document.schema.fields
    context.systemFields = this.document.system.schema.fields
    context.item = this.document
    context.system = this.document.system
    context.source = this.document.toObject()
    context.enrichedDescription = await foundry.applications.ux.TextEditor.implementation.enrichHTML(
      this.document.system.description, { async: true }
    )
    context.isEditMode = this.isEditMode
    context.isPlayMode = this.isPlayMode
    context.isEditable = this.isEditable
    context.traitSuggestions = SYSTEM.TRAITS
    return context
  }

  /** @override */
  _onRender(context, options) {
    super._onRender(context, options)
    this.#dragDrop.forEach(d => d.bind(this.element))
    // Bind Enter key on tag input fields to trigger the addTrait/addSpecialization actions
    this.element.querySelectorAll("input.new-tag[data-action]").forEach(input => {
      input.addEventListener("keydown", event => {
        if (event.key !== "Enter") return
        event.preventDefault()
        const actionName = input.dataset.action
        const handler = this.options.actions?.[actionName]
        if (handler) handler.call(this, event, input)
      })
    })
  }

  // #region Drag-and-Drop Workflow
  /**
   * Create drag-and-drop workflow handlers for this Application.
   * @returns {DragDrop[]} An array of DragDrop handlers.
   * @private
   */
  #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)
    })
  }

  /**
   * Define whether a user is able to begin a dragstart workflow for a given drag selector.
   * @param {string} selector - The candidate HTML selector for dragging.
   * @returns {boolean} Can the current user drag this selector?
   * @protected
   */
  _canDragStart(selector) {
    return this.isEditable
  }

  /**
   * Define whether a user is able to conclude a drag-and-drop workflow for a given drop selector.
   * @param {string} selector - The candidate HTML selector for the drop target.
   * @returns {boolean} Can the current user drop on this selector?
   * @protected
   */
  _canDragDrop(selector) {
    return this.isEditable && this.document.isOwner
  }

  /**
   * Callback actions which occur at the beginning of a drag start workflow.
   * @param {DragEvent} event - The originating DragEvent.
   * @protected
   */
  _onDragStart(event) {
    if ("link" in event.target.dataset) return
  }

  /**
   * Callback actions which occur when a dragged element is over a drop target.
   * @param {DragEvent} event - The originating DragEvent.
   * @protected
   */
  _onDragOver(event) {}

  /**
   * Callback actions which occur when a dragged element is dropped on a target.
   * @param {DragEvent} event - The originating DragEvent.
   * @protected
   */
  async _onDrop(event) {}

  // #endregion

  // #region Actions
  /**
   * Handle toggling between Edit and Play mode.
   * @param {Event} event - The initiating click event.
   * @param {HTMLElement} target - The current target of the event listener.
   */
  static #onToggleSheet(event, target) {
    const modes = this.constructor.SHEET_MODES
    this._sheetMode = this.isEditMode ? modes.PLAY : modes.EDIT
    this.render()
  }

  /**
   * Handle changing a Document's image.
   * @param {PointerEvent} event - The originating click event.
   * @param {HTMLElement} target - The capturing HTML element which defined a [data-action].
   * @returns {Promise} The file picker promise.
   * @private
   */
  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

  // #region Array field helpers (traits, specializations)
  /**
   * Handle adding a tag (trait, specialization) from the input field.
   * @param {PointerEvent|KeyboardEvent} event - The initiating event.
   * @param {HTMLElement} target - The input element.
   */
  static async #onAddTrait(event, target) {
    const value = target.value.trim()
    if (!value) return
    const fieldName = target.dataset.field ?? "system.traits"
    const current = foundry.utils.getProperty(this.document, fieldName) ?? []
    await this.document.update({ [fieldName]: [...current, value] })
    target.value = ""
  }

  /**
   * Handle removing a tag (trait, specialization) from an array field.
   * @param {PointerEvent} event - The initiating click event.
   * @param {HTMLElement} target - The remove button.
   */
  static async #onRemoveTrait(event, target) {
    const index = Number(target.dataset.index)
    const fieldName = target.dataset.field ?? "system.traits"
    const current = [...(foundry.utils.getProperty(this.document, fieldName) ?? [])]
    current.splice(index, 1)
    await this.document.update({ [fieldName]: current })
  }

  // #endregion
}