import Marker from '../Screen/Marker'
import Inspector from '../Screen/Inspector'
import Screen from '../Screen/Screen'
import type { Dimensions } from '../Screen/types'


export default class InspectorController {
  private substitutor: Screen | null = null
  private inspector: Inspector | null = null
  marker: Marker | null = null
  constructor(private screen: Screen) {}

  scale(dims: Dimensions) {
    if (this.substitutor) {
      this.substitutor.scale(dims)
    }
  }

  enableInspector(clickCallback?: (e: { target: Element }) => void): Document | null {
    const parent = this.screen.getParentElement()
    if (!parent) return null;
    if (!this.substitutor) {
      this.substitutor = new Screen()
      this.marker = new Marker(this.substitutor.overlay, this.substitutor)
      this.inspector = new Inspector(this.substitutor, this.marker)
      //this.inspector.addClickListener(clickCallback, true)
      this.substitutor.attach(parent)
    }

    this.substitutor.display(false)

    const docElement = this.screen.document?.documentElement // this.substitutor.document?.importNode(
    const doc = this.substitutor.document
    if (doc && docElement) {
      doc.open()
      doc.write(docElement.outerHTML)
      doc.close()

      // TODO! : copy stylesheets & cssRules?
    }
    this.screen.display(false);
    this.inspector.enable(clickCallback);
    this.substitutor.display(true);
    return doc;
  }

  disableInspector() {
    if (this.substitutor) {
      const doc = this.substitutor.document;
      if (doc) {
        doc.documentElement.innerHTML = "";
      }
      this.inspector.clean();
      this.substitutor.display(false);
    }
    this.screen.display(true);
  }

}