function getBlockElements(contentDiv) {
  let moreFlag = true;
  const blockDiv = document.createElement("div");
  blockDiv.classList.add('blockDiv');
  const editOpen = document.createElement('button');
  editOpen.classList.add('btn__editOpen');
  const editIcon = document.createElement('i');
  editIcon.classList.add('fas', 'fa-chevron-down');
  editOpen.append(editIcon);
  const descButton = document.createElement('button');
  descButton.classList.add('btn__titledesc');
  descButton.textContent = '新增段落';
  const imgButton = document.createElement('button');
  imgButton.classList.add('btn__addimg');
  const icon = document.createElement('i');
  icon.classList.add('fas', 'fa-images');
  imgButton.appendChild(icon);
  const h = document.createElement("H2");
  h.classList.add('blockDiv__h2' ,'mb-3');
  const input = document.createElement("INPUT");
  input.classList.add('input');
  input.setAttribute("type", "text");
  input.setAttribute("placeholder", '標題');
  const inputButton = document.createElement('button');
  inputButton.classList.add('btn__titleInput');
  inputButton.textContent = '新增/修改';
  contentDiv.appendChild(blockDiv);
  blockDiv.append(editOpen, h, input, inputButton, descButton, imgButton);
  blockDiv.classList.add('mb-4');
  console.log(editOpen);
  editOpen.addEventListener('click', function(e) {
    if(e.target.nodeName !== 'I'){ return };
    console.log(e.target.parentNode.parentNode.parentNode.children);
    if(moreFlag) {
      e.target.classList.remove('fas', 'fa-chevron-down');
      e.target.classList.add('fas', 'fa-chevron-up');
      blockDiv.style.height = 'auto';
      moreFlag = false;
    } else {
      e.target.classList.remove('fas', 'fa-chevron-up');
      e.target.classList.add('fas', 'fa-chevron-down');
      blockDiv.style.height = '30vh';
      moreFlag = true;
    }
  });
  return {
    blockDiv: blockDiv,
    h: h,
    titleInput: input,
    inputButton: inputButton,
    descButton: descButton,
    imgButton: imgButton
  };
}

function getdescElements(blockDiv) {
  const descDiv = document.createElement("div");
  const descTextArea = document.createElement("TEXTAREA");
  descDiv.classList.add('descBlock');
  descTextArea.classList.add('textarea');
  descTextArea.setAttribute("type", "text");
  descTextArea.setAttribute("placeholder", "內文...");
  const descInputButton = document.createElement('button');
  descInputButton.classList.add('btn__descInput');
  const removeButton = document.createElement('button');
  removeButton.textContent = '刪除 ';
  const icon = document.createElement('i');
  icon.classList.add('fas', 'fa-trash-alt');
  removeButton.append(icon);
  removeButton.classList.add('btn__remove');
  descInputButton.textContent = '新增/修改';
  blockDiv.appendChild(descDiv);
  descDiv.append(descTextArea, descInputButton, removeButton);
  return {
    descTextArea: descTextArea,
    descInputButton: descInputButton,
    descRemoveButton: removeButton,
  };
}

function getImgElements(blockDiv) {
  const div = document.createElement("div");
  const label = document.createElement('label');
  const img = document.createElement("img");
  const input = document.createElement("INPUT");
  const widthInput = document.createElement("INPUT");
  const heightInput = document.createElement("INPUT");
  const imgContainer = document.createElement('div');
  div.classList.add('imgBlock');
  imgContainer.classList.add('img__container');
  imgContainer.append(img);
  label.setAttribute('for', 'file');
  label.setAttribute('alt', '上傳照片');
  label.textContent = "開啟檔案 ";
  const icon = document.createElement('i');
  icon.classList.add('fas', 'fa-cloud-upload-alt');
  label.append(icon);
  widthInput.setAttribute('placeholder', 'Width(ex: 600)');
  widthInput.classList.add('input');
  heightInput.setAttribute('placeholder', 'Height(ex: 600)');
  heightInput.classList.add('input');
  const inputButton = document.createElement('button');
  const removeButton = document.createElement('button');
  inputButton.classList.add('btn__imgEdit');
  removeButton.classList.add('btn__imgEdit');
  input.setAttribute("type", "file");
  input.setAttribute('id', 'file');
  input.addEventListener('change', function(event) {
    if (event.target.files[0]) {
      let formData = new FormData();
      formData.append('image', event.target.files[0])
      const uploadImgUrl = `${PORTAL_SERVER}upload/img?url=${(JSON.parse(document.getElementById('url').textContent)).url}`
      axios.post(uploadImgUrl, formData, {
        headers: {
        'Content-Type': 'multipart/form-data'
        }
      })
    }
  });
  inputButton.textContent = '圖片新增/修改';
  removeButton.textContent = '刪除';

  blockDiv.appendChild(div);
  div.append(imgContainer, label, input, widthInput, heightInput, inputButton, removeButton);
  return {
    img: img,
    imgInput: input,
    widthInput: widthInput,
    heightInput: heightInput,
    imgInputButton: inputButton,
    imgRemoveButton: removeButton
  };
}
