import { zi } from "@/consts";
import Fridge from "./Fridge";
import WYSiWYG from "./WYSiWYG";

export default class Chit {
  public isMoving = false;

  #top: number;
  #left: number;
  #width: number;
  #height: number;
  #div: HTMLDivElement;
  #txt = '';
  #fridge: Fridge;
  #wysiwyg: WYSiWYG;
  #span!: HTMLSpanElement;

  get nCol() { return "darkblue" }
  get cCol() { return "#CC00CC" }

  constructor(f: Fridge, wysiwyg: WYSiWYG, data?: ChitFromDb) {
    this.#fridge = f;
    this.#wysiwyg = wysiwyg;
    if (data) {
      this.#top = data.top;
      this.#left = data.left;
      this.#height = data.height;
      this.#width = data.width;
      this.#div = this.createDiv(data.zi);
      this.txt = data.txt;
    } else {
      this.#top = 200;
      this.#left = 200;
      this.#width = 150;
      this.#height = 150;
      this.#div = this.createDiv();
    }
  }

  createDiv(z?: number): HTMLDivElement {
    const div = document.createElement("div");
    div.classList.add("chit")
    div.style.top = this.topip;
    div.style.left = this.leftip;
    div.style.height = this.heightip;
    div.style.width = this.widthip;
    // div.style.minHeight = "75px"
    // div.style.minWidth = "75px"
    div.style.zIndex = z != null ? z.toString() : zi(this.#fridge);
    div.style.backgroundColor = this.nCol

    div.innerHTML = `<button class="edit"></button><buttton class="resize"></buttton><buttton class="delete"></buttton>
                     <div class="txt"></div>`
    const be = div.children[0] as HTMLButtonElement;
    const bl = div.children[1] as HTMLButtonElement;
    const bd = div.children[2] as HTMLButtonElement;
    const s = div.children[3] as HTMLSpanElement;

    div.onmousedown = e => this.moveOrResize(e, "mov");
    be.onmousedown = e => this.edit(e);
    bl.onmousedown = e => this.moveOrResize(e, "res");
    bd.onmousedown = () => this.remove();
    this.#span = s;

    document.body.appendChild(div);
    return div;
  }

  moveOrResize(e: MouseEvent, what: "mov" | "res") {
    e.stopPropagation()
    const [sx, sy] = [e.x, e.y]
    const [ssx, ssy] = [this.#left, this.#top]
    const [ssw, ssh] = [this.#width, this.#height]
    let top = this.#top, left = this.#left, width = this.#width, height = this.#height;
    this.color = this.cCol;
    this.#fridge.makeTrans(this);
    this.zi = zi(this.#fridge);

    // this.#div.onmousemove = ee => {
    document.onmousemove = ee => {
      const [dx, dy] = [sx - ee.x, sy - ee.y]

      // console.log(top, left, dy, dx, ee.x === ee.clientX)
      if (ee.x !== ee.clientX) throw new Error("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA")

      if (what === "mov") {
        top = ssy - dy;
        left = ssx - dx;
        this.#div.style.top = top + 'px';
        this.#div.style.left = left + 'px';
      } else {
        const m = 150;
        width = ssw - dx > m ? ssw - dx : m
        height = ssh - dy > m ? ssh - dy : m
        this.#div.style.width = width + "px"
        this.#div.style.height = height + "px"
      }
      this.top = top
      this.left = left
      this.width = width
      this.height = height
    }

    const stopRes = () => {
      this.color = this.nCol;
      this.save()
      document.onmousemove = () => null
      document.onmouseup = () => null
      document.onmouseleave = () => null
      this.#div.onmousemove = () => null
      this.#div.onmouseup = () => null;
      this.#div.onmouseleave = () => null;
      this.#fridge.unmakeTrans();
      // document.onmouseleave = () => null;
    }
    // this.#div.onmouseup = stopRes;
    // this.#div.onmouseleave = stopRes;
    document.onmouseup = stopRes;
    document.onmouseleave = stopRes;

  }
  edit(e: MouseEvent) {
    e.stopPropagation();
    this.#wysiwyg.show(this)
  }
  //#region 
  // movement(e: MouseEvent) {
  //   // e.stopPropagation()
  //   const [sx, sy] = [e.x, e.y]
  //   let top: number, left: number
  //   this.color = this.cCol;
  //   this.#fridge.makeTrans(this);
  //   this.zi = zi(this.#fridge);

  //   // this.#div.onmousemove = ee => {
  //   document.onmousemove = ee => {
  //     const [dx, dy] = [sx - ee.x, sy - ee.y]
  //     top = this.#top - dy;
  //     left = this.#left - dx;
  //     console.log(top, left, dy, dx, ee.x === ee.clientX)
  //     if (ee.x !== ee.clientX) throw new Error("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA")
  //     this.#div.style.top = top.toString() + 'px';
  //     this.#div.style.left = left.toString() + 'px';
  //   }
  //   const stopRes = () => {
  //     this.#top = top
  //     this.#left = left
  //     this.color = this.nCol;
  //     this.save()
  //     document.onmousemove = () => null
  //     document.onmouseup = () => null
  //     document.onmouseleave = () => null
  //     this.#div.onmousemove = () => null
  //     this.#div.onmouseup = () => null;
  //     this.#div.onmouseleave = () => null;
  //     this.#fridge.unmakeTrans();
  //     // document.onmouseleave = () => null;
  //   }
  //   // this.#div.onmouseup = stopRes;
  //   // this.#div.onmouseleave = stopRes;
  //   document.onmouseup = stopRes;
  //   document.onmouseleave = stopRes;
  // }

  // resize(e: MouseEvent) {
  //   e.stopPropagation()
  //   const [sx, sy] = [e.x, e.y]
  //   let width: number, height: number
  //   this.#fridge.makeTrans(this);
  //   this.zi = zi(this.#fridge);

  //   // this.#div.onmousemove = ee => {
  //   document.onmousemove = ee => {
  //     const [dx, dy] = [sx - ee.x, sy - ee.y]
  //     width = this.#width - dx > 75 ? this.#width - dx : 75
  //     height = this.#height - dy > 75 ? this.#height - dy : 75
  //     // console.log(sx, sy, dx, dy, width, height)
  //     this.#div.style.width = width + "px"
  //     this.#div.style.height = height + "px"
  //   }
  //   const stopRes = () => {
  //     this.width = width
  //     this.height = height
  //     this.save()
  //     document.onmousemove = () => null
  //     this.#div.onmousemove = () => null
  //     this.#div.onmouseup = () => null;
  //     this.#div.onmouseleave = () => null;
  //     this.#fridge.unmakeTrans();
  //     // document.onmouseleave = () => null;
  //   }
  //   this.#div.onmouseup = stopRes;
  //   // this.#div.onmouseleave = stopRes;
  //   // this.#div.onmouseleave = stopRes;
  // }
  //#endregion
  remove() {
    this.#fridge.removeChit(this);
    this.#div.remove();
    this.save()
  }
  save() {
    this.#fridge.saveToDb();
  }

  makeTrans() {
    this.#div.style.pointerEvents = "none";
  }
  unmakeTrans() {
    this.#div.style.pointerEvents = "";
  }

  set top(t: number) {
    this.#top = t;
    this.div.style.top = this.topip;
  }
  set left(l: number) {
    this.#left = l;
    this.div.style.left = this.leftip;
  }
  set width(w: number) {
    this.#width = w;
    this.div.style.width = this.widthip;
  }
  set height(h: number) {
    this.#height = h;
    this.div.style.height = this.heightip;
  }
  set color(c: string) {
    this.#div.style.backgroundColor = c;
  }
  set zi(z: string) {
    this.#div.style.zIndex = z;
  }
  set txt(t: string) {
    this.#txt = t;
    this.#span.innerHTML = t;
    this.save();
  }

  get top() {
    return this.#top;
  }
  get left() {
    return this.#left;
  }
  get width() {
    return this.#width;
  }
  get height() {
    return this.#height;
  }
  get topip() {
    return this.#top + "px";
  }
  get leftip() {
    return this.#left + "px";
  }
  get widthip() {
    return this.#width + "px";
  }
  get heightip() {
    return this.#height + "px";
  }
  get div() {
    return this.#div;
  }
  get txt() {
    return this.#txt;
  }
  get zi() {
    return this.#div.style.zIndex;
  }
  get bgcolor() {
    return this.#div.style.backgroundColor;
  }
}
export interface ChitFromDb {
  top: number;
  left: number;
  txt: string;
  width: number;
  height: number;
  zi: number;
}