class Modal {

  constructor() {
    const _this = this;
    const closeBtn = document.getElementById("modalCloseBtn");
    if (closeBtn) {
      closeBtn.onclick = ()=>{_this.setVisible(false)};
    }
  }

  self(): HTMLElement | null {
    return document.getElementById("modal-container");
  }
  
  title(): HTMLElement | null{
    return document.getElementById("modal-title");
  }
  
  content(): HTMLElement | null {
    return document.getElementById("modal-content");
  }
  
  submitBtn(): HTMLElement | null {
    return document.getElementById("modal-submitBtn");
  }
  
  nameField(): string { 
    return (document.getElementById("modal-name") as HTMLInputElement)?.value ?? "";
  }
  
  descField(): string {
    return (document.getElementById("modal-desc") as HTMLInputElement)?.value ?? "";
  }

  visible(): boolean {
    return this.self()?.style.display != "none";
  }
  
  setVisible(v: boolean): void {
    const modal = this.self();
    if (modal) {
      modal.style.display = v ? "block" : "none";
    }
  }
  
  setState(state: OverlayType, args: any): void {
    const _this = this;
    switch (state) {
      case OverlayType.POINT:
        const title = this.title()
        if (title) {
          title.innerHTML = "Add Marker";
        }
        fetch("/static/pointModal.html")
          .then(r=>r.text())
          .then(t=> {
            const content = _this.content();
            if (content) { content.innerHTML = t; }
            const submitBtn = _this.submitBtn();
            if (submitBtn) {
              submitBtn.onclick = () => {
                const name = _this.nameField();
                const desc = _this.descField();
                const point = new Marker(name, desc, args.latlng, {title: name, alt: name});
                point.add(args.map);
                args.overlays.markers.push(point);
                _this.setVisible(false);
              }
            }
          });

        break;
      case OverlayType.CIRCLE:
        break;
      case OverlayType.POLYGON:
        break;
    }
  }
}