const SVG_NS = "http://www.w3.org/2000/svg";
const SVG_XLINK = "http://www.w3.org/1999/xlink";
const SVG = document.querySelector("svg");

class elementoSVG {
  // el método constructor 
  constructor(elmt,atributos) {
    this.atributos = atributos;
    this.elemento = elmt;
  }

  dibujar(elementoPadre) {
    // crea un nuevo elemento svg (this.element)
    const elemento = document.createElementNS(SVG_NS, this.elemento);
    // para cada atributo en el objeto atributos
    for (var atributo in this.atributos) {
      if (this.atributos.hasOwnProperty(atributo)) {
        // establece el valor del mismo atributo para el elemento
        elemento.setAttributeNS(null, atributo, this.atributos[atributo]);
      }
    }
    
    // agrega el elemento  al elemento padre 
    elementoPadre.appendChild(elemento);
    return elemento;
  }
}


class PoligonoRegular extends elementoSVG {
  constructor(lados, centro, radio) {
    // la palabra clave super se utiliza para invocar la clase padre, ( elementoSVG en este caso ) 
    super();
    
    this.atributos = {}
    this.elemento = "polygon";
    // numero de lados del polígono
    this.lados = lados;
    // el centro del circulo circunscrito
    this.c = centro;
    // el radio del circulo circunscrito
    this.r = radio;
    // construye el atributo points para dibujar un polígono regular
    this.Points = 360 / this.lados;
  }
  
  set Points(a) {
    this.atributos.points = "";
    for (let i = 1; i <= this.lados; i++) {
      // calcula el ángulo entre los puntos del polígon
      let aRad = Math.PI / 180 * (a * i);
      // calcula las coordenadas en x e y de cada punto
      let Xp = this.c.x + this.r * Math.cos(aRad);
      let Yp = this.c.y + this.r * Math.sin(aRad);
      // construye el atributo points del polígono
      this.atributos.points += Xp + "," + Yp + " ";
    }
  }
}

let circle = new elementoSVG("circle",{ cx: 70, cy: 100, r: 25, id: "c1" });
circle.dibujar(SVG);

let rect = new elementoSVG("rect",{ x: 120, y: 130, width: 100, height: 50 });
rect.dibujar(SVG);

let hexagon = new PoligonoRegular(6, { x: 120, y: 140 }, 60);
hexagon.dibujar(SVG);