class BaseScriptElement extends HTMLElement {
    get prefix()  { return 'BaseScriptElement'; }
    constructor() { super(); }

    connectedCallback() {
        this.innerHTML = `<li> <label>${this.prefix}</label> </li>`;
    }

    action(...args) { console.log("Hello, World!"); }
}

class BaseInputScriptElement extends BaseScriptElement {
    get prefix()       { return 'BaseInputScriptElement'; }
    get defaultValue() { return '1'; }
    get postfix()      { return ''; }
    get value()        { return this.getElementsByClassName("script-input")[0].value; }
    constructor()      { super(); }

    connectedCallback() {
        this.innerHTML = `
            <li>
                <label>${this.prefix}</label>
                <input type="text" class="script-input" value="${this.defaultValue}"/>
                <label>${this.postfix}</label>
            </li>
        `;
    }

    action() { console.log( this.value ); }
}

class RepeatElement extends BaseInputScriptElement {
    get prefix()       { return 'Repeat'; }
    get defaultValue() { return '10'; }
    get children()     {
        return this.getElementsByClassName("script-nest")[0].children;
    }

    connectedCallback() {
        this.innerHTML = `
            <li>
                <label>${this.prefix}</label>
                <input type="text" class="script-input" value="${this.defaultValue}"/>
                <label>${this.postfix}</label>
                <ul class="script-nest"
                    ondrop="dragDropHandler(event)"
                    ondragover="dragOverHandler(event)"
                ></ul>
            </li>
        `;
    }

    action(Painter) {
        for (let i = 0; i < this.value; i++) {
            for (const elm of this.children) {
                elm.action(Painter);
            }
        }
    }
}

class LeftElement extends BaseInputScriptElement {
    get prefix()       { return 'Left'; }
    get defaultValue() { return '5'; }
    get postfix()      { return 'degrees'; }
    constructor()      { super(); }
    action(Painter)    { Painter.rotation -= this.value; }
}

class RightElement extends BaseInputScriptElement {
    get prefix()       { return 'Right'; }
    get defaultValue() { return '5'; }
    get postfix()      { return 'degrees'; }
    constructor()      { super(); }
    action(Painter)    { Painter.rotation += this.value; }
}

class ForwardElement extends BaseInputScriptElement {
    get prefix()       { return 'Forward'; }
    get defaultValue() { return '10'; }
    get postfix()      { return 'steps'; }
    constructor()      { super(); }
    action(Painter)    {
        let magnitude = this.value
        let radians   = Painter.rotation * (Math.PI / 180);
        const x2      = Painter.x1 + magnitude * Math.cos(radians);
        const y2      = Painter.y1 + magnitude * Math.sin(radians);
        Painter.x1    = x2
        Painter.y1    = y2

        if (Painter.isBrushLifted) {
            Painter.canvasContext.moveTo(x2, y2);
            return;
        }

        Painter.canvasContext.lineTo(x2, y2);
        Painter.canvasContext.stroke();
        Painter.canvasContext.moveTo(x2, y2);
    }
}

class BackElement extends BaseInputScriptElement {
    get prefix()       { return 'Back'; }
    get defaultValue() { return '10'; }
    get postfix()      { return 'steps'; }
    constructor()      { super(); }
    action(Painter)    {
        let magnitude = this.value
        let radians   = (Painter.rotation + 180) % 360;
        const x2      = Painter.x1 + magnitude * Math.cos(radians);
        const y2      = Painter.y1 + magnitude * Math.sin(radians);
        Painter.x1    = x2
        Painter.y1    = y2

        if (Painter.isBrushLifted) {
            Painter.canvasContext.moveTo(x2, y2);
            return;
        }

        Painter.canvasContext.lineTo(x2, y2);
        Painter.canvasContext.stroke();
        Painter.canvasContext.moveTo(x2, y2);
    }
}

class CircleElement extends BaseInputScriptElement {
    get prefix()       { return 'Circle'; }
    get defaultValue() { return '20'; }
    get postfix()      { return 'radius'; }
    constructor()      { super(); }
    action(Painter)        {
        Painter.canvasContext.beginPath();
        Painter.canvasContext.arc(Painter.x1, Painter.y1, this.value, 0, 2 * Math.PI);
        Painter.canvasContext.stroke();
    }
}

class PenUpElement extends BaseScriptElement {
    get prefix()    { return 'Pen Up'; }
    constructor()   { super(); }
    action(Painter) { Painter.isBrushLifted = true; }
}

class PenDownElement extends BaseScriptElement {
    get prefix()    { return 'Pen Down'; }
    constructor()   { super(); }
    action(Painter) { Painter.isBrushLifted = false; }
}

class BackToCenterElement extends BaseScriptElement {
    get prefix()    { return 'Back to Center'; }
    constructor()   { super(); }
    action(Painter) {
        Painter.x1 = Painter.canvas.width  / 2
        Painter.y1 = Painter.canvas.height / 2
        Painter.canvasContext.moveTo( Painter.x1, Painter.y1 );
    }
}

class BrushSizeElement extends BaseInputScriptElement {
    get prefix()        { return 'Brush Size'; }
    get defaultValue()  { return 24; }
    get postfix()       { return 'px'; }
    constructor()       { super(); }
    connectedCallback() {
        this.innerHTML = `
            <li>
                <label>${this.prefix}</label>
                <input type="text" class="script-input" value="${this.defaultValue}"/>
                <label>${this.postfix}</label>
            </li>
        `;
    }
    action(Painter) {
        Painter.brushSize                 = this.value;
        Painter.canvasContext.lineWidth   = this.value;
    }
}

class BrushColorElement extends BaseInputScriptElement {
    get prefix()        { return 'Brush Color'; }
    get defaultValue()  { return '#000000'; }
    constructor()       { super(); }
    connectedCallback() {
        this.innerHTML = `
            <li>
                <label>${this.prefix}</label>
                <input type="color" class="script-input" value="${this.defaultValue}"/>
                <label>${this.postfix}</label>
            </li>
        `;
    }
    action(Painter) {
        Painter.brushColor                = this.value;
        Painter.canvasContext.fillStyle   = this.value;
        Painter.canvasContext.strokeStyle = this.value;
    }
}