pyro_components

// #############################################################################
// ####    C U S T O M    E V E N T    H A N D L E R S
// #############################################################################

window.addEventListener('pyro:clear', (e) => {
  if (e?.target?.value != '') {
    e.target.value = '';
  }
});

window.addEventListener(`pyro:scroll-top`, (e) => {
  if (e && e.detail && e.detail.id) {
    let el = document.getElementById(e.detail.id);
    if (el) {
      maybeScrollParent(el);
    } else {
      console.error(
        `pyro:scroll-top requested for DOM ID #${e.detail.id} doesn't exist!`,
      );
    }
  } else if (e && e.detail && e.detail.selector) {
    let el = document.querySelector(e.detail.selector);
    if (el) {
      maybeScrollParent(el);
    } else {
      console.error(
        `pyro:scroll-top requested for DOM selector #${e.detail.selector} doesn't exist!`,
      );
    }
  } else {
    console.error(
      `pyro:scroll-top event doesn't contain e.detail.id or e.detail.selector!`,
    );
  }
});

// Scroll element or parents if already scrolled
export function maybeScrollParent(el, depth = 0) {
  if (el.scrollTop == 0 && el.parentElement && el.parentElement.scrollTop > 0) {
    el.parentElement.scrollTop = 0;
  } else if (
    el.scrollTop == 0 &&
    el.parentElement &&
    el.parentElement.scrollTop == 0 &&
    depth < 5
  ) {
    maybeScrollParent(el.parentElement, depth + 1);
  } else {
    el.scrollTop = 0;
  }
}

// #############################################################################
// ####    T I M E Z O N E    T O O L I N G
// #############################################################################
export function getTimezone() {
  return Intl.DateTimeFormat().resolvedOptions().timeZone;
}

export async function sendTimezoneToServer() {
  const timezone = getTimezone();
  let csrfToken = document
    .querySelector("meta[name='csrf-token']")
    .getAttribute('content');

  // Skip if we sent the timezone already or the timezone changed since last time we sent
  if (
    typeof window.localStorage != 'undefined' &&
    (!localStorage['timezone'] || localStorage['timezone'] != timezone)
  ) {
    const response = await fetch('/session/set-timezone', {
      method: 'POST',
      mode: 'cors',
      cache: 'no-cache',
      credentials: 'same-origin',
      headers: {
        'Content-Type': 'application/json',
        'x-csrf-token': csrfToken,
      },
      referrerPolicy: 'no-referrer',
      body: JSON.stringify({ timezone: timezone }),
    });

    if (response.status === 200) {
      localStorage['timezone'] = timezone;
    }
  }
}

// #############################################################################
// ####    H O O K S
// #############################################################################

export const PyroColorSchemeHook = {
  mounted() {
    this.init(this.el.getAttribute('data-scheme'));
  },
  updated() {
    this.init();
  },
  init(scheme) {
    initScheme(scheme);
    this.el.addEventListener('click', window.toggleScheme);
  },
};

export const PyroFlashComponent = {
  mounted() {
    this.oldMessageHTML = document.querySelector(
      `#${this.el.id}-message`,
    ).innerHTML;
    if (this.el.dataset?.autoshow !== undefined) {
      window.liveSocket.execJS(
        this.el,
        this.el.getAttribute('data-show-exec-js'),
      );
    }
    resetHideTTL(this);
  },
  updated() {
    newMessageHTML = document.querySelector(`#${this.el.id}-message`).innerHTML;
    if (newMessageHTML !== this.oldMessageHTML) {
      this.oldEl = this.el;
      this.oldMessageHTML = newMessageHTML;
      resetHideTTL(this);
    } else {
      el.value = this.countdown;
    }
  },
  destroyed() {
    clearInterval(this.ttlInterval);
  },
};

export const PyroNudgeIntoView = {
  mounted() {
    nudge(this.el);
  },
  updated() {
    nudge(this.el);
  },
};

export const PyroAutocompleteComponent = {
  mounted() {
    this.lastValueSent = null;
    const expanded = () => {
      return booleanDataset(this.el.getAttribute('aria-expanded'));
    };

    const updateSearchThrottled = throttle(() => {
      if (this.lastValueSent !== this.el.value || !expanded()) {
        this.lastValueSent = this.el.value;
        this.pushEventTo(this.el.dataset.myself, 'search', this.el.value);
      }
    }, this.el.dataset.throttleTime);

    if (this.el.dataset.autofocus) {
      focusAndSelect(this.el);
    }

    const selectedIndex = () => {
      return parseInt(this.el.dataset.selectedIndex);
    };
    const options = () => {
      const listbox = document.getElementById(
        this.el.getAttribute('aria-controls'),
      );

      if (listbox?.children) {
        return Array.from(listbox.children);
      } else {
        return [];
      }
    };

    const setSelectedIndex = (selectedIndex) => {
      // Loop selectedIndex back to first or last result if out of bounds
      const rc = parseInt(this.el.dataset.resultsCount);
      selectedIndex = ((selectedIndex % rc) + rc) % rc;
      this.el.dataset.selectedIndex = selectedIndex;

      options().forEach((option, i) => {
        if (i === selectedIndex) {
          option.setAttribute('aria-selected', true);
        } else {
          option.removeAttribute('aria-selected');
        }
      });
    };

    const pick = (e) => {
      const i = selectedIndex();
      const input_el = document.getElementById(this.el.dataset.inputId);
      let label = '';
      let value = '';

      if (i > -1) {
        const option = options()[i];
        label = option.dataset.label;
        value = option.dataset.value;
      }

      e.preventDefault();
      e.stopPropagation();
      this.el.value = label;
      this.el.focus();
      selectValue(this.el);
      this.pushEventTo(this.el.dataset.myself, 'pick', {
        label,
        value,
      });

      input_el.value = value;
      input_el.dispatchEvent(new Event('input', { bubbles: true }));

      return false;
    };

    this.el.addEventListener('keydown', (e) => {
      switch (e.key) {
        case 'Tab':
          if (expanded()) {
            return pick(e);
          } else {
            return true;
          }
        case 'Esc': // IE/Edge
        case 'Escape':
          if (this.el.value !== '' || !expanded()) {
            e.preventDefault();
            e.stopPropagation();
            this.el.value = '';
            this.el.dataset.selectedIndex = -1;
            options().forEach((option, i) => {
              option.removeAttribute('aria-selected');
            });
            updateSearchThrottled();
            return false;
          } else if (expanded()) {
            e.preventDefault();
            e.stopPropagation();
            this.el.value = this.el.dataset.savedLabel || '';
            selectValue(this.el);
            this.pushEventTo(this.el.dataset.myself, 'cancel');
            this.lastValueSent = null;
            return false;
          } else {
            return true;
          }
        case 'Enter':
          if (expanded()) {
            return pick(e);
          } else {
            this.el.value = '';
            e.preventDefault();
            e.stopPropagation();
            updateSearchThrottled();
            return false;
          }
        case 'Up': // IE/Edge
        case 'Down': // IE/Edge
        case 'ArrowUp':
        case 'ArrowDown':
          if (expanded()) {
            e.preventDefault();
            e.stopPropagation();

            let i = selectedIndex();
            i = e.key === 'ArrowUp' || e.key === 'Up' ? i - 1 : i + 1;
            setSelectedIndex(i);

            return false;
          } else {
            return true;
          }
        default:
          return true;
      }
    });
    this.el.addEventListener('focus', (e) => {
      selectValue(this.el);
    });
    this.el.addEventListener('input', (e) => {
      switch (e.inputType) {
        case 'insertText':
        case 'deleteContentBackward':
        case 'deleteContentForward':
          updateSearchThrottled();
          return true;
        default:
          return false;
      }
    });
    this.el.addEventListener('pick', (e) => {
      setSelectedIndex(e.detail.dispatcher.dataset.index);
      return pick(e);
    });
  },
};

export const PyroCopyToClipboard = {
  mounted() {
    this.content = this.el.innerHTML;
    let { value, message, ttl } = this.el.dataset;
    this.el.addEventListener('click', (e) => {
      e.preventDefault();
      navigator.clipboard.writeText(value);
      this.el.innerHTML = message || 'Copied to clipboard!';
      this.timeout = window.setTimeout(() => {
        this.el.innerHTML = this.content;
      }, ttl);
    });
  },
  updated() {
    window.clearTimeout(this.timeout);
  },
  destroyed() {
    window.clearTimeout(this.timeout);
  },
};

export const hooks = {
  PyroColorSchemeHook,
  PyroFlashComponent,
  PyroNudgeIntoView,
  PyroAutocompleteComponent,
  PyroCopyToClipboard,
};

export function nudge(el) {
  let width = window.innerWidth;
  let height = window.innerHeight;
  let rect = el.getBoundingClientRect();

  hOffset = el.dataset?.horizontalOffset || 0;
  vOffset = el.dataset?.verticalOffset || 0;

  // Nudge left if offscreen
  if (rect.right + 24 > width) {
    el.style.right = hOffset;
    el.style.left = null;
  } else {
    el.style.left = hOffset;
    el.style.right = null;
  }

  // Nudge up if offscreen
  if (rect.bottom + 24 > height) {
    el.style.bottom = vOffset;
    el.style.top = null;
  } else {
    el.style.top = vOffset;
    el.style.bottom = null;
  }
}

export function resetHideTTL(self) {
  clearInterval(self.ttlInterval);
  if (self.el.dataset?.ttl > 0) {
    self.countdown = self.el.dataset?.ttl;
    self.ttlInterval = setInterval(() => {
      self.countdown = self.countdown - 16.7;
      if (self.countdown <= 0) {
        window.liveSocket.execJS(
          self.el,
          self.el.getAttribute('data-hide-exec-js'),
        );
      } else {
        el = document.querySelector(`#${self.el.id}>section>progress`);
        if (el) {
          el.value = self.countdown;
        } else {
          clearInterval(self.ttlInterval);
        }
      }
    }, 16.7);
  }
}

export function throttle(callback, limit) {
  let waiting = false;
  return function () {
    if (!waiting) {
      callback.apply(this, arguments);
      waiting = true;
      setTimeout(function () {
        callback.apply(this, arguments);
        waiting = false;
      }, limit);
    }
  };
}

export function selectValue(el) {
  if (typeof el.select === 'function') {
    el.select();
  }
}

export function focusAndSelect(el) {
  el.focus();
  selectValue(el);
}

export function booleanDataset(value) {
  return ![null, undefined, false, 'false'].includes(value);
}