// Copyright (c) 2020 Proton Technologies AG
//
// This file is part of ProtonMail Bridge.
//
// ProtonMail Bridge is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// ProtonMail Bridge is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with ProtonMail Bridge.  If not, see <https://www.gnu.org/licenses/>.

import QtQuick 2.8
import ProtonUI 1.0


Rectangle {
    id: root

    color: Style.transparent

    property color fillColor        : Style.main.background
    property color strokeColor      : Style.main.line
    property real strokeWidth       : Style.dialog.borderInput
    property real radiusTopLeft     : Style.dialog.radiusButton
    property real radiusBottomLeft  : Style.dialog.radiusButton
    property real radiusTopRight    : Style.dialog.radiusButton
    property real radiusBottomRight : Style.dialog.radiusButton

    function paint() {
        canvas.requestPaint()
    }

    onFillColorChanged         : root.paint()
    onStrokeColorChanged       : root.paint()
    onStrokeWidthChanged       : root.paint()
    onRadiusTopLeftChanged     : root.paint()
    onRadiusBottomLeftChanged  : root.paint()
    onRadiusTopRightChanged    : root.paint()
    onRadiusBottomRightChanged : root.paint()


    Canvas {
        id: canvas
        anchors.fill: root

        onPaint: {
            var ctx = getContext("2d")
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle   = root.fillColor
            ctx.strokeStyle = root.strokeColor
            ctx.lineWidth   = root.strokeWidth
            var dimensions = {
                x: ctx.lineWidth,
                y: ctx.lineWidth,
                w: canvas.width-2*ctx.lineWidth,
                h: canvas.height-2*ctx.lineWidth,
            }
            var radius = {
                tl: root.radiusTopLeft,
                tr: root.radiusTopRight,
                bl: root.radiusBottomLeft,
                br: root.radiusBottomRight,
            }

            root.roundRect(
                ctx,
                dimensions,
                radius, true, true
            )
        }
    }

    // adapted from: https://stackoverflow.com/questions/1255512/how-to-draw-a-rounded-rectangle-on-html-canvas/3368118#3368118
    function roundRect(ctx, dim, radius, fill, stroke) {
        if (typeof stroke == 'undefined') {
            stroke = true;
        }
        if (typeof radius === 'undefined') {
            radius = 5;
        }
        if (typeof radius === 'number') {
            radius = {tl: radius, tr: radius, br: radius, bl: radius};
        } else {
            var defaultRadius = {tl: 0, tr: 0, br: 0, bl: 0};
            for (var side in defaultRadius) {
                radius[side] = radius[side] || defaultRadius[side];
            }
        }
        ctx.beginPath();
        ctx.moveTo(dim.x + radius.tl, dim.y);
        ctx.lineTo(dim.x + dim.w - radius.tr, dim.y);
        ctx.quadraticCurveTo(dim.x + dim.w, dim.y, dim.x + dim.w, dim.y + radius.tr);
        ctx.lineTo(dim.x + dim.w, dim.y + dim.h - radius.br);
        ctx.quadraticCurveTo(dim.x + dim.w, dim.y + dim.h, dim.x + dim.w - radius.br, dim.y + dim.h);
        ctx.lineTo(dim.x + radius.bl, dim.y + dim.h);
        ctx.quadraticCurveTo(dim.x, dim.y + dim.h, dim.x, dim.y + dim.h - radius.bl);
        ctx.lineTo(dim.x, dim.y + radius.tl);
        ctx.quadraticCurveTo(dim.x, dim.y, dim.x + radius.tl, dim.y);
        ctx.closePath();
        if (fill) {
            ctx.fill();
        }
        if (stroke) {
            ctx.stroke();
        }
    }

    Component.onCompleted: root.paint()
}