/*
    SPDX-FileCopyrightText: 2021 qewer33
    SPDX-License-Identifier: GPL-3.0-or-later
*/

import QtQuick 2.12
import QtQuick.Controls 2.12 as QtControls
import QtQuick.Layouts 1.15 as QtLayouts
import QtQuick.Dialogs 1.2

import org.kde.kirigami 2.3 as Kirigami

import "../lib"

Item {
    id: appearancePage
    width: childrenRect.width
    height: childrenRect.height

    signal configurationChanged

    property alias cfg_clockUse24hFormat: use24hFormat.checkState
    property string cfg_clockFontColor
    property string cfg_clockFontFamily
    property bool cfg_clockBoldText
    property bool cfg_clockItalicText
    property int cfg_clockFontSize

    property alias cfg_showDayDisplay: showDayDisplayCheckBox.checked
    property string cfg_dayFontColor
    property string cfg_dayFontFamily
    property bool cfg_dayBoldText
    property bool cfg_dayItalicText
    property int cfg_dayFontSize

    property alias cfg_showDateDisplay: showDateDisplayCheckBox.checked
    property alias cfg_dateCustomDateFormat: customDateFormat.text
    property string cfg_dateFontColor
    property string cfg_dateFontFamily
    property bool cfg_dateBoldText
    property bool cfg_dateItalicText
    property int cfg_dateFontSize


    function fixFontFamilyChange(id, comboBox) {
        // HACK by the time we populate our model and/or the ComboBox is finished the value is still undefined
        if (id) {
            for (var i = 0, j = fontsModel.count; i < j; ++i) {
                if (fontsModel.get(i).value === id) {
                    comboBox.currentIndex = i
                    break
                }
            }
        }
    }

    onCfg_clockFontFamilyChanged: {
        fixFontFamilyChange(cfg_clockFontFamily, clockFontFamilyComboBox)
    }

    onCfg_dayFontFamilyChanged: {
        fixFontFamilyChange(cfg_dayFontFamily, dayFontFamilyComboBox)
    }

    onCfg_dateFontFamilyChanged: {
        fixFontFamilyChange(cfg_dateFontFamily, dateFontFamilyComboBox)
    }

    ListModel {
        id: fontsModel
        Component.onCompleted: {
            var arr = [] // use temp array to avoid constant binding stuff
            arr.push({
                         "text": "ClearClock Default",
                         "value": "ccdefault"
                     })

            var fonts = Qt.fontFamilies()
            var foundIndex = 0
            for (var i = 0, j = fonts.length; i < j; ++i) {
                arr.push({
                             "text": fonts[i],
                             "value": fonts[i]
                         })
            }
            append(arr)
        }
    }

    QtLayouts.ColumnLayout {
        id: layout
        anchors.fill: parent

        QtLayouts.ColumnLayout {
            QtLayouts.Layout.fillWidth: true
            spacing: 10

            QtControls.Label {
                text: i18n("Clock Display Settings")
                font.bold: true
                font.pixelSize: 17
            }

            QtControls.CheckBox {
                id: use24hFormat
                text: i18n("Use 24-hour clock")
                tristate: false
                checked: cfg_clockUse24hFormat
            }

            FontConfig {
                fontModel: fontsModel

                colorValue: cfg_clockFontColor
                onColorValueChanged: {
                    cfg_clockFontColor = colorValue
                }

                fontValue: cgf_clockFontFamily
                onFontValueChanged: {
                    cfg_clockFontFamily = fontValue
                }

                boldValue: cfg_clockBoldText
                onBoldValueChanged: {
                    cfg_clockBoldText = boldValue
                }

                italicValue: cfg_clockItalicText
                onItalicValueChanged: {
                    cfg_clockItalicText = italicValue
                }

                pxSizeValue: cfg_clockFontSize
                onPxSizeValueChanged: {
                    cfg_clockFontSize = pxSizeValue
                }
            }
        }

        QtLayouts.ColumnLayout {
            QtLayouts.Layout.fillWidth: true
            spacing: 10

            QtControls.Label {
                text: i18n("Day Display Settings")
                font.bold: true
                font.pixelSize: 17
            }

            QtControls.CheckBox {
                id: showDayDisplayCheckBox
                text: i18n("Show day display")
            }

            FontConfig {
                fontModel: fontsModel
                enabled: showDayDisplayCheckBox.checked

                colorValue: cfg_dayFontColor
                onColorValueChanged: {
                    cfg_dayFontColor = colorValue
                }

                fontValue: cgf_dayFontFamily
                onFontValueChanged: {
                    cfg_dayFontFamily = fontValue
                }

                boldValue: cfg_dayBoldText
                onBoldValueChanged: {
                    cfg_dayBoldText = boldValue
                }

                italicValue: cfg_dayItalicText
                onItalicValueChanged: {
                    cfg_dayItalicText = italicValue
                }

                pxSizeValue: cfg_dayFontSize
                onPxSizeValueChanged: {
                    cfg_dayFontSize = pxSizeValue
                }
            }
        }

        QtLayouts.ColumnLayout {
            QtLayouts.Layout.fillWidth: true
            spacing: 10

            QtControls.Label {
                text: i18n("Date Display Settings")
                font.bold: true
                font.pixelSize: 17
            }

            QtControls.CheckBox {
                id: showDateDisplayCheckBox
                text: i18n("Show date display")
            }

            QtLayouts.RowLayout {
                enabled: showDateDisplayCheckBox.checked

                QtControls.Label {
                    text: i18n("Date format:")
                    opacity: if (enabled) 1
                             else 0.4
                }

                QtLayouts.RowLayout {
                    QtControls.TextField {
                        id: customDateFormat
                        QtLayouts.Layout.fillWidth: true
                    }

                    QtControls.Button {
                        icon.name: "exifinfo"
                        onClicked: Qt.openUrlExternally("https://doc.qt.io/qt-5/qml-qtqml-qt.html#formatDateTime-method")
                    }
                }
            }

            FontConfig {
                fontModel: fontsModel
                enabled: showDateDisplayCheckBox.checked

                colorValue: cfg_dateFontColor
                onColorValueChanged: {
                    cfg_dateFontColor = colorValue
                }

                fontValue: cgf_dateFontFamily
                onFontValueChanged: {
                    cfg_dateFontFamily = fontValue
                }

                boldValue: cfg_dateBoldText
                onBoldValueChanged: {
                    cfg_dateBoldText = boldValue
                }

                italicValue: cfg_dateItalicText
                onItalicValueChanged: {
                    cfg_dateItalicText = italicValue
                }

                pxSizeValue: cfg_dateFontSize
                onPxSizeValueChanged: {
                    cfg_dateFontSize = pxSizeValue
                }
            }
        }
    }
}

/*##^##
Designer {
    D{i:0;autoSize:true;height:480;width:640}D{i:1}D{i:3}D{i:2}
}
##^##*/