let x1 = 0;
let x2 = 1000;
let y1 = 0;
let y2 = 1000;

const width = 150;
const height = 220;
const hw = width / 2;
const hh = height / 2;
const r = Math.sqrt(width * width + height * height) / 2;
const a = Math.asin(hw / r) * 180 / Math.PI;
class Card {
    constructor(word, clickHandler, setId, cardId) {
        this.word = word;
        this.setId = setId;
        this.cardId = cardId;
        this._onCLick = clickHandler;
        this.selected = false;

        this._rotation = 0;
        this.element = document.createElement("div");
        this.element.classList.add("card");
        this.element.innerText = word;

        this.x = 0;
        this.y = 0;

        this.element.addEventListener("click", this._onElementClick.bind(this));
    }
    destructor() {
        this.element.remove();
    }
    select() {
        if (!this.selected) {
            this.element.classList.add("selected");
            this.selected = true;
        }
    }
    unselect() {
        if (this.selected) {
            this.element.classList.remove("selected");
            this.selected = false;
        }
    }
    disrotate() {
        let angle = Math.random() * 150 - 75;
        this.rotate(angle);
    }
    rotate(angle) {
        this._rotation = angle;
        this.element.style.transform = "rotate(" + angle +"deg)"
    }
    position(x, y) {
        this.element.style.position = "absolute";
        this.x = x;
        this.y = y;
        this.element.style.top = y + "px";
        this.element.style.left = x + "px";
    }
    displace() {
        let lA;
        let cA = 90;
        if (this._rotation > 0) {
            lA = this._rotation - a;
            cA += this._rotation + a;
        } else {
            lA = this._rotation + a;
            cA -= this._rotation - a;
        }

        let hl = r * Math.abs(Math.cos(lA * Math.PI/180));
        let hc = r * Math.abs(Math.cos(cA * Math.PI/180))
        let yDiff = hl - hh;
        let xDiff = hc - hw;
        let minY = yDiff + y1;
        let maxY = y2 - height - yDiff;
        let minX = xDiff + x1;
        let maxX = x2 - width - xDiff;

        let x = Math.round(Math.random() * (maxX - minX) + minX);
        let y = Math.round(Math.random() * (maxY - minY) + minY);

        this.position(x, y);
    }
    _onElementClick(e) {
        this._onCLick(this);
    }

    static setBounds(minX, minY, maxX, maxY) {
        x1 = minX;
        x2 = maxX - 7;
        y1 = minY;
        y2 = maxY - 7;
    }
}

export default Card