export default async function initClipboard() {
  const els = document.querySelectorAll(".clipboard");
  if (!els || !els.length) return;

  const { default: ClipboardJS } = await import(
    /* webpackChunkName: "clipboard" */ "clipboard"
  );

  const clipboard = new ClipboardJS(els);
  clipboard.on("success", (e) => {
    e.clearSelection();

    $(`#${e.trigger.getAttribute("id")}`).popup("destroy");
    e.trigger.setAttribute(
      "data-content",
      e.trigger.getAttribute("data-success")
    );
    $(`#${e.trigger.getAttribute("id")}`).popup("show");
    e.trigger.setAttribute(
      "data-content",
      e.trigger.getAttribute("data-original")
    );
  });

  clipboard.on("error", (e) => {
    $(`#${e.trigger.getAttribute("id")}`).popup("destroy");
    e.trigger.setAttribute(
      "data-content",
      e.trigger.getAttribute("data-error")
    );
    $(`#${e.trigger.getAttribute("id")}`).popup("show");
    e.trigger.setAttribute(
      "data-content",
      e.trigger.getAttribute("data-original")
    );
  });
}