import {Polygon} from './polygon.js'

class App{
  constructor(){
    this.canvas = document.createElement('canvas');
    document.body.appendChild(this.canvas);
    this.ctx = this.canvas.getContext('2d');

    this.pixelRatio = window.devicePixelRatio > 1 ? 2 : 1;

    window.addEventListener('resize', this.resize.bind(this), false);
    this.resize();

    this.isDown = false;
    this.moveX = 0;
    this.offsetX = 0;
    document.addEventListener('pointerdown', this.onDown.bind(this), false);
    document.addEventListener('pointermove', this.onMove.bind(this), false);
    document.addEventListener('pointerup', this.onUp.bind(this), false);

    window.requestAnimationFrame(this.animate.bind(this));
  }

  resize(){
    this.stageWidth = document.body.clientWidth;
    this.stageHeight = document.body.clientHeight;

    this.canvas.width = this.stageWidth * this.pixelRatio;
    this.canvas.height= this.stageHeight * this.pixelRatio;
    this.ctx.scale(this.pixelRatio, this.pixelRatio);

    //도형의 사이즈 조절
    this.Polygon = new Polygon(
      this.stageWidth / 2,
      // this.stageHeight / 2,  //도형 또는 점일때
      this.stageHeight / + (this.stageHeight / 4),  //사각형 & 화면 반만 채울때
      this.stageHeight / 1.5,
      15 //<<도형의 꼭지점 개수 설정 ex.3이면 삼각형
    )
  }

  animate(){
    window.requestAnimationFrame(this.animate.bind(this));

    this.ctx.clearRect(0, 0, this.stageWidth, this.stageHeight);
    
    this.moveX *= 0.92;
    this.Polygon.animate(this.ctx, this.moveX);
  }

  onDown(e){
    this.isDown = true;
    this.moveX = 0 ;
    this.offsetX = e.clientX;
  }

  onMove(e){
    if(this.isDown){
      this.moveX = e.clientX - this.offsetX;
      this.offsetX = e.clientX;
    }
  }

  onUp(e){  
    this.isDown = false;
  }
}

window.onload = () => {
  new App();
}

const PI2 = Math.PI * 2;

const COLORS = [
  '#4b45ab',
  '#554fb8',
  '#605ac7',
  '#2a91a8',
  '#2e9ab2',
  '#32a5bf',
  '#81b144',
  '#85b944',
  '#8fc549',
  '#808000',
  '#e0af27',
  '#fec72e',
  '#bf342d',
  '#ca3931',
  '#d7423a',
]

export class Polygon{
  constructor(x, y, radius, sides){
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.sides = sides;
    this.rotate = 0;
  }

  animate(ctx, moveX){
    ctx.save();
    //사각형에 색을 넣을때는 주석
    // ctx.fillStyle = '#000';
    // ctx.beginPath();

    const angle = PI2 / this.sides;
    const angle2 = PI2 / 4;

    ctx.translate(this.x, this.y);

    //도형 or 점일때
    // this.rotate -= moveX * 0.008;
    //사각형에 색칠할때
    this.rotate -= moveX * 0.008;
    ctx.rotate(this.rotate);
    
    for(let i = 0; i < this.sides; i++){
      const x = this.radius * Math.cos(angle * i);
      const y = this.radius * Math.sin(angle * i);
      

      /////////////////////////////////////////////////////////사각형으로만드는 코드 시작
      ctx.save();
      //사각형에 배열에 담긴 색을 넣고싶을때추가
      ctx.fillStyle = COLORS[i];
      ctx.translate(x,y);
      ctx.rotate(((360 / this.sides) * i + 45 ) * Math.PI / 180);
      ctx.beginPath();
      for(let j = 0; j < 4; j++){
        const x2 = 80 * Math.cos(angle2 * j);
        const y2 = 80 * Math.sin(angle2 * j);
        (j == 0) ? ctx.moveTo(x2, y2) : ctx.lineTo(x2, y2);
      }
      ctx.fill();
      ctx.closePath();
      ctx.restore();
      /////////////////////////////////////////////////////////사각형으로만드는 코드 끝
      

      // (i == 0) ? ctx.moveTo(x,y) : ctx.lineTo(x,y); //도형으로 만드는 for문

      // ctx.beginPath();  //도형 채우는게 아니라 점만 있도록
      // ctx.arc(x, y, 30, 0, PI2, false); //도형 채우는게 아니라 점만 있도록
      // ctx.fill(); //도형 채우는게 아니라 점만 있도록

    }

    // ctx.fill(); //도형으로 만드는 for문
    // ctx.closePath();  //도형으로 만드는 for문
    ctx.restore();
  }
}