export function getPostCard(html: HTMLHtmlElement) {
  const title =
    html
      .querySelector('meta[property="cozy:title"]')
      ?.getAttribute("content") ||
    html.querySelector("title")?.innerHTML?.replace("Cozy 🧸 | ", "");

  const description = html
    .querySelector('meta[property="cozy:description"]')
    ?.getAttribute("content");
  const image = html
    .querySelector('meta[property="cozy:image"]')
    ?.getAttribute("content");
  const source = html
    .querySelector('meta[property="cozy:source"]')
    ?.getAttribute("content");
  const published = html
    .querySelector('meta[property="cozy:published"]')
    ?.getAttribute("content");

  const postCard = `
      <div class="post-card">
          <div class="post-card__image">
        ${
          image
            ? `
            <img src="${image}" alt="${title} | ${description}" />
          `
            : '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/><path fill="currentColor" d="M14 17H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>'
        }
          </div>
        <div class="post-card__content">
          ${
            source || published
              ? `
          <div class="post-card__meta">
            ${
              source
                && `
                <p class="post-card__source">${source}</p>
              `
            }
            ${
              published
                && `
                <p class="post-card__published">${
                  new Date(published)?.toLocaleDateString() || ""
                }</p>
              `
            }
          </div>
          `
              : ""
          }
          <h3 class="post-card__title">${title}</h3>
          ${
            description
              ? `
            <p class="post-card__description">${description}</p>`
              : ""
          }
        </div>
      </div>
    `;
  return postCard;
}
export function renderPost(responseText, url, postDivSelector: string, preventPushState = false) {
            const postDiv = document.querySelector(postDivSelector);
            const html = document.createElement('html');
            html.innerHTML = responseText;
            const newPost = html.querySelector('body')?.querySelector('#post');
            if (postDiv && newPost?.innerHTML) {
              postDiv.innerHTML = newPost.innerHTML
              const appUrl = document.getElementById('app-url') as HTMLInputElement;
              const cozyUrl = html.querySelector('meta[property="cozy:url"]')?.getAttribute('content');
              const homeBtn = document.getElementById('app-home') as HTMLButtonElement;
              const submitBtn = document.getElementById('submit') as HTMLButtonElement;


              if(cozyUrl !== '/') {
                appUrl.value = cozyUrl || '';
                homeBtn.removeAttribute('disabled');
                submitBtn.removeAttribute('disabled');
              } else {
                appUrl.value = '';
                homeBtn.setAttribute('disabled', 'true');
                submitBtn.setAttribute('disabled', 'true');
              }

              if(!preventPushState) {
                window.history.pushState({url}, '', url);
              }
            }
    }