namespace SL_SchedGridColumnRangeContent {
    export class RangeStripBase implements IGetParent<SL_SchedGridColumnRange>{
        private columnRange: SL_SchedGridColumnRange;
        private settings: StripSettings;


        public constructor(columnRange: SL_SchedGridColumnRange, settings: StripSettings) {
            this.columnRange = columnRange;
            this.settings = settings;
        }
        private UI: { body: JQuery, ctx: CanvasRenderingContext2D } = {
            body: null,
            ctx: null
        }
        public GetParent(): SL_SchedGridColumnRange {
            return this.columnRange;
        }

        public Render() {
            this.createBody();
            this.createText();
        }
        private createBody() {
            this.UI.body = ($('<canvas></canvas>')
                .addClass("SchedulerControl-Termin")
                .css("top", "0px")
                .attr("height", this.settings.size.height)
                .attr("width", this.settings.size.width)
                .css("left", this.settings.position.X));
            this.GetParent().GetUI().body.append(this.UI.body);
            this.UI.ctx = (<HTMLCanvasElement>this.UI.body[0]).getContext("2d");
            this.UI.ctx.beginPath();
            this.UI.ctx.rect(0, 0, this.settings.size.width, this.settings.size.height);
            this.UI.ctx.fillStyle = this.settings.color;
            this.UI.ctx.fill();

        }
        private createText() {
            this.UI.ctx.save();
            this.UI.ctx.translate(this.settings.size.width / 2, this.settings.size.height / 2);
            this.UI.ctx.rotate(-Math.PI / 2);
            this.UI.ctx.font = this.settings.fontSize + "px Arial";
            this.UI.ctx.fillStyle = this.settings.labelColor;
            this.UI.ctx.textAlign = "center";
            var fontTopVector = Math.round(17-(this.settings.size.width/2));
            if (this.settings.size.height > 1200) {
                var posX = this.settings.size.height / 4;
                this.UI.ctx.fillText(this.settings.label, posX, fontTopVector);
                this.UI.ctx.fillText(this.settings.label, -posX, fontTopVector);
            }

            this.UI.ctx.fillText(this.settings.label, 0, fontTopVector);
            var fontTopVector = fontTopVector + 23;
            if (this.settings.squareLabel != null && this.settings.squareLabel != "") {
                var textWidth = this.UI.ctx.measureText(this.settings.squareLabel);
                if (this.settings.size.height > 1200) {
                    var posX = this.settings.size.height / 4;
                    this.UI.ctx.fillText(this.settings.squareLabel, posX, fontTopVector);
                    this.UI.ctx.fillText(this.settings.squareLabel, -posX, fontTopVector);
                    this.createSquares(posX, fontTopVector, textWidth.width);
                    this.createSquares(-posX, fontTopVector, textWidth.width);
                }
                this.UI.ctx.fillStyle = this.settings.labelColor;
                this.UI.ctx.fillText(this.settings.squareLabel, 0, fontTopVector);
                this.createSquares(0, fontTopVector, textWidth.width);
            }

            this.UI.ctx.restore();
        }
        private createSquares(X:number,Y:number,textWidth:number) {
            var vector = Math.round(textWidth / 2)+5;
            this.UI.ctx.beginPath();
            this.UI.ctx.rect(X - vector - 15, Y-12, 15, 15);
            this.UI.ctx.fillStyle = this.settings.squareColor;
            this.UI.ctx.fill();
            this.UI.ctx.beginPath();
            this.UI.ctx.rect(X + vector, Y-12, 15, 15);
            this.UI.ctx.fillStyle = this.settings.squareColor;
            this.UI.ctx.fill();
        }
    }

    export class StripSettings {
        public position: { X: number, Y: number } = { X: null, Y: null };
        public size: { width: number, height: number } = { width: null, height: null };
        public color: string;
        public label: string;
        public labelColor: string = "white";
        public fontSize: number = 14;
        public squareColor: string;
        public squareLabel: string;

    }
}