// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import FluentUI.Controls
import FluentUI.impl
import QtQuick.Templates as T

T.TabButton {
    id: control

    implicitWidth: implicitBackgroundWidth
                        // Math.max(implicitBackgroundWidth + leftInset + rightInset,
                        //     implicitContentWidth + leftPadding + rightPadding)
    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
                             implicitContentHeight + topPadding + bottomPadding)

    padding: 6
    spacing: 3

    property var p_color: "#1B806A"

    icon.width: 24
    icon.height: 24
    icon.color: checked ? control.palette.windowText : control.palette.brightText

    contentItem: IconLabel {
        id: lbl_tab
        spacing: control.spacing
        mirrored: control.mirrored
        display: control.display

        icon: control.icon
        text: control.text
        font: control.font
        color: control.checked ? p_color : "#ffffff"
    }

    onCheckedChanged: {
        if (!control.checked && bg_rect) {
            bg_rect.color = "#242424"
        }
    }

    background: Rectangle {
        id: bg_rect
        implicitHeight: 30
        implicitWidth: parent.width
        color: control.checked ? Qt.rgba(74/255,74/255,74/255, 0.5) : "#242424"
        radius: 5
        anchors{
            left: parent.left
            leftMargin: control.checked ? 0 : 1
            top: parent.top
            topMargin: control.checked ? 0 : 1
            bottom: parent.bottom
            bottomMargin: control.checked ? 0 : 1
            right: parent.right
            rightMargin: control.checked ? 0 : 1
        }
        MouseArea {
            anchors.fill: parent
            hoverEnabled: true
            onEntered: {
                if (!control.checked)
                    parent.color = Qt.rgba(74/255,74/255,74/255, 0.5)
            }
            onExited: {
                if (!control.checked)
                    parent.color = "#242424"
            }
        }
        border.color: '#717171' //Qt.rgba(74/255,74/255,74/255, 0.2)
        border.width: control.checked ? 1 : 0
        Rectangle{
            visible: control.checked
            width: control.text.length * 18
            height: 3
            color: "#22C55E"
            radius: 3
            anchors.bottom: parent.bottom
            anchors.horizontalCenter: parent.horizontalCenter
        }
    }
}