import QtQuick 2.15
import QtQuick.Layouts 2.15
import QtQuick.Controls.Basic 2.15
import "../../themes"
import "../../components"

Button {
    id: root

    // implicitHeight: 32
    implicitWidth: 135

    // Public API
    property alias selectedDate: cal.selectedDate
    property alias displayYear: cal.displayYear
    property alias displayMonth: cal.displayMonth
    property alias calendarLocale: cal.locale
    property bool useISOWeek: true
    property bool weekNumbersVisible: false
    property var minimumDate: undefined
    property var maximumDate: undefined
    property string placeholderText: qsTr("Pick a date")
    property string textFormat: "MM/dd/yyyy"

    leftPadding: 12
    rightPadding: 12
    topPadding: 5
    bottomPadding: 7

    property string iconName: "ic_fluent_calendar_20_regular"
    property int iconSize: 16
    property color iconColor: Theme.currentTheme.colors.textSecondaryColor
    property bool iconVisible: true

    signal dateSelected(date date)

    function fmt(d) {
        if (!d) return placeholderText
        try { return Qt.formatDate(d, textFormat) } catch (e) {}
        var y = d.getFullYear(); var m = ("0" + (d.getMonth()+1)).slice(-2); var day = ("0" + d.getDate()).slice(-2)
        return y + "-" + m + "-" + day
    }

    text: root.selectedDate ? root.fmt(root.selectedDate) : root.placeholderText
    onClicked: { pickerPopup.open() }


    contentItem: RowLayout {
        spacing: 6
        Text {
            id: label
            Layout.fillWidth: true

            elide: Text.ElideRight
            verticalAlignment: Text.AlignVCenter
            text: root.selectedDate ? root.fmt(root.selectedDate) : root.placeholderText
            color: root.selectedDate ? Colors.proxy.textColor
                : Colors.proxy.textSecondaryColor
        }
        Icon {
            visible: root.iconVisible
            name: root.iconName
            size: root.iconSize
            color: root.iconColor
        }
    }

    Popup {
        id: pickerPopup
        padding: 0
        width: cal.implicitWidth
        height: Math.min(cal.implicitHeight, Math.max(0, Overlay.overlay.height - 16))

        onVisibleChanged: {
            if (visible) {
                if (root.selectedDate) {
                    cal.displayYear = root.selectedDate.getFullYear()
                    cal.displayMonth = root.selectedDate.getMonth() + 1
                }
                autoPosition()
            }
        }

        Calendar {
            id: cal
            anchors.fill: parent

            selectionMode: "single"
            useISOWeek: root.useISOWeek
            minimumDate: root.minimumDate
            maximumDate: root.maximumDate
            onDateSelected: function(d) {
                root.dateSelected(d)
                pickerPopup.close()
            }
        }
    }

    function resetToToday() {
        cal.selectedDate = new Date()
        cal.displayYear = cal.selectedDate.getFullYear()
        cal.displayMonth = cal.selectedDate.getMonth() + 1
    }
}
