const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

const width = canvas.width;
const height = canvas.height;

let current;
let selection = [];

const tools = {
  graffity: {
    mousemove(e) {
      e.buttons & 1 &&
        new Circle(
          e.clientX,
          e.clientY,
          +size.value,
          color.value,
          fill.checked
        );
    },
  },
  circle: {
    mousedown(e) {
      current = new Circle(e.clientX, e.clientY, 1, color.value, fill.checked);
    },
    mousemove(e) {
      if (!current) return;

      current.radius = current.distanceTo(e.clientX, e.clientY);
      Drawable.drawAll();
    },

    mouseup(e) {
      current = null;
    },
  },
  line: {
    mousedown(e) {
      current = new Line(e.clientX, e.clientY, 0, 0, color.value, +size.value);
    },
    mousemove(e) {
      if (!current) return;

      current.width = e.clientX - current.x;
      current.height = e.clientY - current.y;

      Drawable.drawAll();
    },

    mouseup(e) {
      current = null;
    },
  },

  rectangle: {
    mousedown(e) {
      current = new Rectangle(
        e.clientX,
        e.clientY,
        0,
        0,
        color.value,
        +size.value,
        fill.checked
      );
    },
    mousemove(e) {
      if (!current) return;
      current.width = e.clientX - current.x;
      current.height = e.clientY - current.y;
      Drawable.drawAll();
    },

    mouseup(e) {
      current = null;
    },
  },

  ellipse: {
    mousedown(e) {
      current = new Ellipse(
        e.clientX,
        e.clientY,
        0,
        0,
        color.value,
        +size.value,
        fill.checked
      );
    },
    mousemove(e) {
      if (!current) return;
      current.width = e.clientX - current.x;
      current.height = e.clientY - current.y;
      Drawable.drawAll();
    },

    mouseup(e) {
      current = null;
    },
  },

  select: {
    click(e) {
      console.log(e);
      let found = Drawable.instances.filter(
        (c) => c.in && c.in(e.clientX, e.clientY)
      );
      if (found.length) {
        if (e.ctrlKey) {
          selection.push(found.pop());
        } else {
          selection = [found.pop()];
        }
      } else {
        if (!e.ctrlKey) selection = [];
      }

      Drawable.drawAll(selection);
    },
  },
};

function superHandler(evt) {
  let t = tools[tool.value];
  if (typeof t[evt.type] === "function") t[evt.type].call(this, evt);
}

canvas.onmousemove = superHandler;
canvas.onmouseup = superHandler;
canvas.onmousedown = superHandler;
canvas.onclick = superHandler;

////

function Drawable() {
  Drawable.addInstance(this);
}

const distance = (x1, y1, x2, y2) => ((x1 - x2) ** 2 + (y1 - y2) ** 2) ** 0.5;

Drawable.prototype.draw = function () {};
Drawable.prototype.distanceTo = function (x, y) {
  if (typeof this.x !== "number" || typeof this.y !== "number") {
    return NaN;
  }
  return distance(this.x, this.y, x, y);
};
Drawable.instances = [];
Drawable.addInstance = function (item) {
  Drawable.instances.push(item);
};

Drawable.drawAll = function (selection = []) {
  ctx.clearRect(0, 0, width, height);
  Drawable.forAll((item) => item.draw(selection.includes(item)));
};

Drawable.forAll = function (callback) {
  for (var i = 0; i < Drawable.instances.length; i++) {
    callback(Drawable.instances[i]);
  }
};

class Circle extends Drawable {
  constructor(x, y, radius, color, fill) {
    super();
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.color = color;
    this.fill = fill;
    this.draw();
  }

  draw(selected) {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
    ctx.closePath();
    ctx.fillStyle = this.color;
    if (selected) {
      ctx.setLineDash([5, 15]);
      ctx.lineWidth = 2;
      ctx.stroke();
    } else ctx.setLineDash([]);
    if (this.fill) ctx.fill();
    else ctx.stroke();
  }

  in(x, y) {
    return this.distanceTo(x, y) < this.radius;
  }

  inBounds(x, y, w, h) {
    return this.x >= x && this.x <= x + w && this.y >= y && this.y <= y + h;
  }
}

class Line extends Drawable {
  constructor(x, y, width, height, color, lineWidth) {
    super();
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.color = color;
    this.lineWidth = lineWidth;

    this.draw();
  }

  draw(selected) {
    ctx.beginPath();
    ctx.moveTo(this.x, this.y);
    ctx.lineTo(this.x + this.width, this.y + this.height);
    ctx.closePath();
    ctx.strokeStyle = this.color;
    ctx.lineWidth = this.lineWidth;
    ctx.stroke();

    if (selected) {
      ctx.setLineDash([5, 15]);
      ctx.lineWidth = 4;
      ctx.stroke();
    } else ctx.setLineDash([]);

    if (this.fill) ctx.fill();
    else {
      ctx.strokeStyle = this.color;
      ctx.stroke();
    }
  }

  in(x, y) {
    return (
      x > this.x &&
      x < this.x + this.width &&
      y > this.y &&
      y < this.y + this.height
    );
  }
}

class Rectangle extends Drawable {
  constructor(x, y, width, height, color, lineWidth, fill) {
    super();
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.color = color;
    this.lineWidth = lineWidth;
    this.fill = fill;

    this.draw();
  }

  draw(selected) {
    if (!selected) {
      ctx.setLineDash([]);

      if (this.fill) {
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
      } else {
        ctx.beginPath();
        ctx.lineWidth = this.lineWidth;
        ctx.strokeStyle = this.color;
        ctx.rect(this.x, this.y, this.width, this.height);
        ctx.stroke();
      }
    } else {
      ctx.setLineDash([5, 15]);
      ctx.beginPath();
      ctx.lineWidth = this.lineWidth;
      ctx.strokeStyle = this.color;
      ctx.rect(this.x, this.y, this.width, this.height);
      ctx.stroke();
    }
  }

  in(x, y) {
    return (
      x > this.x &&
      x < this.x + this.width &&
      y > this.y &&
      y < this.y + this.height
    );
  }
}

class Ellipse extends Drawable {
  constructor(x, y, width, height, color, lineWidth, fill) {
    super();
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.color = color;
    this.lineWidth = lineWidth;
    this.fill = fill;

    this.draw();
  }

  draw(selected) {
    const width2 = this.width / 2;
    const height2 = this.height / 2;

    ctx.beginPath();
    ctx.ellipse(
      this.x + width2,
      this.y + height2,
      Math.abs(width2),
      Math.abs(height2),
      0,
      0,
      2 * Math.PI
    );
    ctx.closePath();
    ctx.fillStyle = this.color;

    if (selected) {
      ctx.setLineDash([5, 15]);
      ctx.lineWidth = 4;
      ctx.stroke();
    } else ctx.setLineDash([]);

    if (this.fill) ctx.fill();
    else {
      ctx.strokeStyle = this.color;
      ctx.stroke();
    }
  }

  in(x, y) {
    return (
      x > this.x &&
      x < this.x + this.width &&
      y > this.y &&
      y < this.y + this.height
    );
  }
}

color.onchange = () => {
  selection.forEach((c) => (c.color = color.value));
  Drawable.drawAll(selection);
};

document.getElementById("delete").onclick = () => {
  Drawable.instances = Drawable.instances.filter(
    (item) => !selection.includes(item)
  );
  selection = [];
  Drawable.drawAll();
};

function jsonPost(url, data) {
  return new Promise((resolve, reject) => {
    var x = new XMLHttpRequest();
    x.onerror = () => reject(new Error("jsonPost failed"));
    x.open("POST", url, true);
    x.send(JSON.stringify(data));

    x.onreadystatechange = () => {
      if (x.readyState == XMLHttpRequest.DONE && x.status == 200) {
        resolve(JSON.parse(x.responseText));
      } else if (x.status != 200) {
        reject(new Error("status is not 200"));
      }
    };
  });
}

sendInChat.onclick = () => {
  jsonPost("http://students.a-level.com.ua:10012", {
    func: "addMessage",
    nick: nick.value,
    message: `<img src = ${canvas.toDataURL()} >`,
  }).then(() => {
    console.log(imgSrcUrl5);
  });
};