import { Controller } from "@hotwired/stimulus"

/*
 * FadeReplaceController is a general purpose stimulus controller to:
 * replace existing content on the page with new content, and then fade that new content in
 *
 * Usage:
 *
 * 1. Define a transition duration (in ms), and a json map with replacement content
 *    and then use the "map" and "duration" values to make theme available in the controller:
 *
 *    <% map = { selection1: "This is some content", selection2: "This is different content" }.to_json %>
 *    <%= div_tag(
 *      data: {
 *        controller: "fade-replace",
 *        fade_replace_map_value: map,
 *        fade_replace_duration_value: "300"
 *      }
 *    ) %>
 *
 * 2. Choose an element and action (change, click, etc.) on that element to trigger the fade replace
 *    Specify "fade-replace-target": "key" on this element to use its value to determine
 *    the replacement content from the "map" defined above
 *
 *   <%= cp.some_select(
 *     data: {
 *       action: "change->fade-replace#fadeReplace",
 *       "fade-replace-target": "key"
 *     }
 *   %>
 *
 * 3. Use "fade-replace-target": "fadeReplace" to designate where you want the new content to be faded in
 *
 *    <%= div_tag(
 *      data: { "fade-replace-target": "fadeReplace" }
 *    ) %>
 *
 */

export default class extends Controller {
  static targets = [
    "key",
    "fadeReplace",
  ]
  static values = {
    "duration": Number,
    "map": Object,
  }

  fadeReplace() {
    // attempt to find content
    if (this.mapValue === undefined) return;
    const newContent = this.mapValue[this.keyTarget.value];
    if (newContent === undefined) return;
    // disable any transitions
    this.fadeReplaceTarget.style.transition = "none";
    // Hide element and update content
    this.fadeReplaceTarget.style.opacity = 0;
    this.fadeReplaceTarget.innerHTML = newContent;
    // Force reflow
    this.fadeReplaceTarget.offsetHeight;
    // Set up transition and fade in
    this.fadeReplaceTarget.style.transition = `opacity ${this.durationValue}ms ease-in-out`;
    this.fadeReplaceTarget.style.opacity = 1;
  }

};