/*
    SPDX-FileCopyrightText: 2015 David Edmundson <davidedmundson@kde.org>

    SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-GPL
*/

import QtQuick
import QtQuick.Controls as QQC2
import QtQuick.Dialogs as QtDialogs
import org.kde.ki18n

/*!
   \qmltype ColorButton
   \inqmlmodule org.kde.kquickcontrols

   \brief A pushbutton to display or allow user selection of a color.

   This widget can be used to display or allow user selection of a color.

   Example usage:
   \qml
   import org.kde.kquickcontrols

   ColorButton {
     onColorChanged: console.log(color)
   }
   \endqml

   \inherits QtQuick.Controls.Button
 */
QQC2.Button {
    id: root

    KI18nContext {
        id: _tr
        translationDomain: "kdeclarative6"
    }

    /*!
       \qmlproperty color ColorButton::color
       \brief The user-selected color.
     */
    property alias color: colorDialog.selectedColor

    /*!
       \qmlproperty string ColorDialog dialogTitle
       \brief Title to show in the dialog.
     */
    property alias dialogTitle: colorDialog.title

    /*!
       \brief Allow the user to configure an alpha value.
     */
    property bool showAlphaChannel: true

    /*!
       \brief This signal is emitted when the \a color dialog has been accepted.

       \since 5.61
     */
    signal accepted(color color)

    readonly property real _buttonMarigns: 4 // same as QStyles. Remove if we can get this provided by the QQC theme

    implicitWidth: 40 + _buttonMarigns * 2 // to perfectly clone kcolorbutton from kwidgetaddons

    Accessible.name: _tr.i18nc("@info:whatsthis for a button", "Color button")
    Accessible.description: enabled
      ? _tr.i18nc("@info:whatsthis for a button of current color code %1", "Current color is %1. This button will open a color chooser dialog.", color)
      : _tr.i18nc("@info:whatsthis for a button of current color code %1", "Current color is %1.", color)

    // create a checkerboard background for alpha to be adjusted
    Canvas {
        anchors.fill: colorBlock
        visible: colorDialog.selectedColor.a < 1

        onPaint: {
            const ctx = getContext('2d');

            ctx.fillStyle = "white";
            ctx.fillRect(0,0, ctx.width, ctx.height);

            ctx.fillStyle = "black";
            // in blocks of 16x16 draw two black squares of 8x8 in top left and bottom right
            for (let j = 0; j < width; j += 16) {
                for (let i = 0; i < height; i += 16) {
                    // top left, bottom right
                    ctx.fillRect(j, i, 8, 8);
                    ctx.fillRect(j + 8, i + 8, 8, 8);
                }
            }
        }
    }

    Rectangle {
        id: colorBlock

        anchors.centerIn: parent
        height: parent.height - root._buttonMarigns * 2
        width: parent.width - root._buttonMarigns * 2

        color: enabled ? colorDialog.selectedColor : disabledPalette.button

        SystemPalette {
            id: disabledPalette
            colorGroup: SystemPalette.Disabled
        }
    }

    QtDialogs.ColorDialog {
        id: colorDialog
        onAccepted: root.accepted(selectedColor)
        parentWindow: root.Window.window
        options: root.showAlphaChannel ? QtDialogs.ColorDialog.ShowAlphaChannel : undefined
    }

    onClicked: {
        colorDialog.open();
    }
}