const container = document.createElement('dialog');

function createDialog() {
  const close = document.createElement('button');

  container.setAttribute('style', 'width: 100%;letter-spacing:1px;background-color:pink;font-family:helvetica !important;font-weight:100;border-radius:12px;padding-inline:60px;color:#161613;border-color:#fff;position:fixed;inset:0;margin:auto;width:100%;max-width:400px;z-index:2147483647;font-size:18px;text-rendering:optimizeLegibility;text-align:left;line-height:36px;');
  
  close.setAttribute('style', 'position:absolute;right:10px;top:8px !important;background-color:white;border-radius:50%;color:black;z-index:30;padding:0  0 0 1px;font-size:15px;font-weight:100;width:20px;height:20px;cursor:pointer;display:flex;justify-content:center;align-items:flex-start;border:1px solid black;line-height:16px;');
  close.textContent = 'x';
  close.onclick = () => container.remove();
  
  document.body.appendChild(container);
  container.appendChild(close);

  plainText("I am some plain text and I love getting copied", "plainText1");
  plainText("Here is another example!", "plainText2");

  container.showModal();
}

function plainText(textToCopy, id) {
  const text = document.createElement('p');
  const copyText = document.createElement('button');
  
  text.textContent = textToCopy;
  text.id = id;
  
  copyText.type = "button";
  copyText.textContent = "Copy Plain Text";
  copyText.style = "background-color:white;padding: 5px 8px;color:black;border:2px solid currentColor;border-radius:4px;cursor:pointer;";
  copyText.onclick = () => copyStuff(text.id);
  
  container.appendChild(text);
  container.appendChild(copyText);
}

// Helper function for copying text if id of element is provided
function copyStuff(id) {
  const copyTarget = document.getElementById(id).textContent;
  return navigator.clipboard.writeText(copyTarget);
}

createDialog();

const container = document.createElement('dialog');

function createDialog() {
  const close = document.createElement('button');

  container.setAttribute('style', 'width: 100%;letter-spacing:1px;background-color:pink;font-family:helvetica !important;font-weight:100;border-radius:12px;padding-inline:60px;color:#161613;border-color:#fff;position:fixed;inset:0;margin:auto;width:100%;max-width:400px;z-index:2147483647;font-size:18px;text-rendering:optimizeLegibility;text-align:left;line-height:36px;');
  
  close.setAttribute('style', 'position:absolute;right:10px;top:8px !important;background-color:white;border-radius:50%;color:black;z-index:30;padding:0  0 0 1px;font-size:15px;font-weight:100;width:20px;height:20px;cursor:pointer;display:flex;justify-content:center;align-items:flex-start;border:1px solid black;line-height:16px;');
  close.textContent = 'x';
  close.onclick = () => container.remove();
  
  document.body.appendChild(container);
  container.appendChild(close);

  plainText("I am some plain text and I love getting copied", "plainText1");
  plainText("Here is another example!", "plainText2");
  littleNotePad();

  container.showModal();
}

function plainText(textToCopy, id) {
  const text = document.createElement('p');
  const copyText = document.createElement('button');
  
  text.textContent = textToCopy;
  text.id = id;
  
  copyText.type = "button";
  copyText.textContent = "Copy Plain Text";
  copyText.style = "background-color:white;padding: 5px 8px;color:black;border:2px solid currentColor;border-radius:4px;cursor:pointer;";
  copyText.onclick = () => copyStuff(true,text.id);
  
  container.appendChild(text);
  container.appendChild(copyText);
}

function littleNotePad() {
  const text = document.createElement('textarea');
  const copyText = document.createElement('button');
  
  text.id = "textareaId";
  text.setAttribute("placeholder", "I am lil notepad");
  
  copyText.type = "button";
  copyText.textContent = "Copy Plain Text";
  copyText.style = "background-color:white;padding: 5px 8px;color:black;border:2px solid currentColor;border-radius:4px;cursor:pointer;";
  copyText.onclick = () => copyStuff(false,text.id);
  
  container.appendChild(text);
  container.appendChild(copyText);
}

// Helper function for copying text if id of element is provided
function copyStuff(plainText, id) {
  const copyTarget = plainText ? document.getElementById(id).textContent : document.getElementById(id).value;
  return navigator.clipboard.writeText(copyTarget);
}

createDialog();