import { html, render, directive } from 'lit-html';
// Directive for Async call
const resolvePromise  = directive((promise) => (part: any) => {
  part.setValue("Waiting for promise to resolve....");

  Promise.resolve(promise).then(
    (resolvedValue) => {
      part.setValue(resolvedValue);
      part.commit();
    }
  );
  });
  const waitForIt = new Promise((resolve) => {
    setTimeout(() => {
      resolve("Promise is resolved.");
    }, 3000);
  });
const helloTemplate = html`<div>${resolvePromise (waitForIt)}</div>`
render(helloTemplate, document.getElementById('part1'));


// Directive for handdling state
const stateMap = new WeakMap();
const statefulDirective  = directive(() => (part: any) => {
  let myState = stateMap.get(part);
  const object1 = {};

   if (myState === undefined) {
    // Initialize state for this location
    myState = {};
    stateMap.set(object1, 'state with weakMap');
    part.setValue(stateMap.get(object1));
  }
  });
const helloTemplate1 = html`<div>${statefulDirective ()}</div>`
render(helloTemplate1, document.getElementById('part2'));