//This object is a draggable stretchable rotatable Tilesprite.  It has three parts, a base which is where you drag, a tip which is how you stretch and rotate, the base is the texture that fills between base and tip
class Stretch extends Phaser.GameObjects.TileSprite{
    constructor(config){
        //takes in starting point of base and initial parameters of the tile sprite.  Then texture keys for base, tip, and body.  Then scale but that should be used with caution and will likley need tweaking
        super(config.scene, config.x, config.y, config.width, config.height, config.key, config.baseKey, config.tipKey, config.scale);
        config.scene.add.existing(this);


        //this object is the tilesprite body itself
        this.setInteractive().setTint(config.tint).setDepth(1).setScale(config.scale);
        //base of the sprite which is how you drag the object around
        var base =  config.scene.add.image(config.x,config.y,config.baseKey).setDepth(2).setInteractive().setTint(config.tint).setScale(config.scale).setRotation(Math.PI/2);
        //tip of the sprite which can be pulledto stech the body
        var tip =  config.scene.add.image(config.x+base.height/2,config.y,config.tipKey).setInteractive().setDepth(3).setTint(config.tint).setScale(config.scale).setRotation(Math.PI/2);

        config.scene.input.setDraggable(this);
        config.scene.input.setDraggable(base);
        config.scene.input.setDraggable(tip);


        //function to stretch the sprite
        tip.on('drag', function (pointer, dragX, dragY) {
            //origin of the tilesprite
            this.setOrigin(0.5, 1);
            //all object turn at this angle which is defined by the pointer
            const angleToPointer = Phaser.Math.Angle.Between(pointer.x, pointer.y, base.x, base.y);
            this.setRotation(angleToPointer-Math.PI/2);
            tip.setRotation(angleToPointer-Math.PI/2);
            base.setRotation(angleToPointer-Math.PI/2);

            //defines the length of the tileSprite
            //** config.scale helps keep the objects together but will need tweaking depending on the sprites used */
            //it's better to get the right size asset and use a config.scale = 1
            const distanceToPointer = Phaser.Math.Distance.Between(pointer.x, pointer.y, base.x, base.y);
            this.setSize(config.width, distanceToPointer/config.scale);

            //both angle and distance determine the movement of the tip when dragging using major math skills
            tip.x = base.x - distanceToPointer*Math.cos(angleToPointer);
            tip.y = base.y - distanceToPointer*Math.sin(angleToPointer);
        }, this);

        //this just moves the
        base.on('drag', function (pointer, dragX, dragY) {

            //since the tilesprite starts at the base it can move exatcly with the drag
            this.x = dragX;
            this.y = dragY;
            base.x = dragX;
            base.y = dragY;
            //rotation is related to the angle from before, height is related to distance.  Used these to again determine the movement of the tip when dragging using major math skills
            tip.x = base.x - this.height*config.scale*Math.cos(Math.PI/2+base.rotation);
            tip.y = base.y - this.height*config.scale*Math.sin(Math.PI/2+base.rotation);
        }, this);
    }

}