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: string;
  #fridge: Fridge;
  #wysiwyg: WYSiWYG;

  get nCol() { return "lightblue" }
  get cCol() { return "lightpink" }

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

  mouseDownH(e: MouseEvent) {
    e;
    // this.setzi();
    const top = e.y
    const left = e.x
    this.#div.onmousemove = e => this.move(e, { top, left });
    this.#div.style.backgroundColor = this.cCol
    this.#div.style.zIndex = zi()
    this.isMoving = true;
  }
  mouseUpH(e: MouseEvent) {
    e;
    // e.preventDefault()
    this.#div.style.backgroundColor = this.nCol
    this.#div.onmousemove = () => null;
    this.#top = parseInt(this.#div.style.top.replace('px', ''))
    this.#left = parseInt(this.#div.style.left.replace('px', ''))
    // this.#div.style.zIndex = ""
    this.isMoving = false;
  }

  move(e: MouseEvent, coord: { top: number, left: number }) {
    this.#div.style.top = `${this.#top + e.y - coord.top}px`;
    this.#div.style.left = `${this.#left + e.x - coord.left}px`;
    // this.top = this.#div.offsetTop - coord.top
    // this.left = this.#div.offsetLeft - coord.left
  }
  setzi() {
    this.#fridge.setChitZIAuto();
    this.#div.style.zIndex = "10"
  }

  createDiv(): 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 = zi();
    div.style.backgroundColor = this.nCol

    div.innerHTML = `<button class="edit"></button><buttton class="resize"></buttton><buttton class="delete"></buttton>`
    const be = div.children[0] as HTMLButtonElement;
    const bl = div.children[1] as HTMLButtonElement;
    const bd = div.children[2] as HTMLButtonElement;
    be.onmousedown = e => this.edit(e);
    bl.onmousedown = e => this.resize(e);
    bd.onmousedown = () => this.remove();

    // div.onmousedown = e => this.mouseDownH(e);
    div.onmousedown = e => this.mouseDownH(e);
    div.onmouseup = e => this.mouseUpH(e);    // div.onmouseleave = (e) => this.mouseUpH(e);
    document.onmouseleave = e => this.mouseUpH(e);    // div.onmouseleave = (e) => this.mouseUpH(e);
    document.body.appendChild(div);
    return div;
  }

  edit(e: MouseEvent) {
    e.stopPropagation();
    this.#wysiwyg.show(this)
  }
  resize(e: MouseEvent) {
    e.stopPropagation()
    const [sx, sy] = [e.x, e.y]
    let width: number, height: number
    this.#div.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.#div.onmousemove = () => null
    }
    this.#div.onmouseup = stopRes;
    // this.#div.onmouseleave = stopRes;
    document.body.onmouseleave = stopRes;
  }
  remove() {
    this.#fridge.removeChit(this);
    this.#div.remove();
  }

  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;
  }

  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;
  }
}
export interface ChitFromDb {
  top: number;
  left: number;
  txt: string;
  width: number;
  height: number;
  zi: number;
}