// SPDX-FileCopyrightText: Copyright 2013 Jolla Ltd
// SPDX-FileCopyrightText: Copyright 2023 Open Mobile Platform LLC <community@omp.ru>
// SPDX-License-Identifier: BSD-3-Clause

import QtQuick 2.0
import Sailfish.Silica 1.0

Page {
    id: page

    DockedPanel {
        id: controlPanel

        width: page.isPortrait ? parent.width : Theme.itemSizeExtraLarge + Theme.paddingLarge
        height: page.isPortrait ? Theme.itemSizeExtraLarge + Theme.paddingLarge : parent.height

        dock: page.isPortrait ? Dock.Top : Dock.Left

        Flow {
            width: isPortrait ? undefined : Theme.itemSizeExtraLarge

            anchors.centerIn: parent

            Switch {
                icon.source: "image://theme/icon-m-shuffle"
            }
            Switch {
                icon.source: "image://theme/icon-m-repeat"
            }
            Switch {
                icon.source: "image://theme/icon-m-share"
            }
        }
    }

    Drawer {
        id: drawer

        anchors.fill: parent
        dock: page.isPortrait ? Dock.Top : Dock.Left

        background: SilicaListView {
            anchors.fill: parent
            model: 5

            //% "Drawer"
            header: PageHeader { title: qsTrId("ui-component-gallery-panel-drawer") }

            PullDownMenu {
                MenuItem {

                    //% "Option 1"
                    text: qsTrId("ui-component-gallery-panel-option-1")

                }
                MenuItem {

                    //% "Option 2"
                    text: qsTrId("ui-component-gallery-panel-option-2")

                }
            }
            VerticalScrollDecorator {}

            delegate: ListItem {
                id: listItem

                Label {
                    x: Theme.horizontalPageMargin

                    //% "List Item "
                    text: qsTrId("ui-component-gallery-panel-list-item") + modelData

                    anchors.verticalCenter: parent.verticalCenter
                    highlighted: listItem.highlighted
                }
            }
        }

        SilicaFlickable {
            anchors {
                fill: parent
                leftMargin: page.isPortrait ? 0 : controlPanel.visibleSize
                topMargin: page.isPortrait ? controlPanel.visibleSize : 0
                rightMargin: page.isPortrait ? 0 : progressPanel.visibleSize
                bottomMargin: page.isPortrait ? progressPanel.visibleSize : 0
            }

            clip: isPortrait && (controlPanel.expanded || progressPanel.expanded)

            contentHeight: column.height + Theme.paddingLarge

            VerticalScrollDecorator {}

            MouseArea {
                enabled: drawer.open
                anchors.fill: column
                onClicked: drawer.open = false
            }

            Column {
                id: column
                spacing: Theme.paddingLarge
                width: parent.width
                enabled: !drawer.opened

                //% "Panels and sections"
                PageHeader { title: qsTrId("ui-component-gallery-panel-panels-and-sections") }

                SectionHeader {

                    //% "Panels"
                    text: qsTrId("ui-component-gallery-panel-panels")

                }
                Button {

                    text: controlPanel.open ?
                              //% "Hide controls"
                              qsTrId("ui-component-gallery-panel-hide-controls") :
                              //% "Show controls"
                              qsTrId("ui-component-gallery-panel-show-controls")

                    onClicked: controlPanel.open = !controlPanel.open
                    anchors.horizontalCenter: parent.horizontalCenter
                }

                Button {

                    text: progressPanel.open ?
                              //% "Hide progress"
                              qsTrId("ui-component-gallery-panel-hide-progress") :
                              //% "Show progress"
                              qsTrId("ui-component-gallery-panel-show-progress")

                    onClicked: progressPanel.open = !progressPanel.open
                    anchors.horizontalCenter: parent.horizontalCenter
                }

                Button {

                    //% "Open drawer"
                    text: qsTrId("ui-component-gallery-panel-open-drawer")

                    onClicked: drawer.open = true
                    anchors.horizontalCenter: parent.horizontalCenter
                }

                SectionHeader {

                    //% "Expanding sections"
                    text: qsTrId("ui-component-gallery-panel-expanding-sections")

                }
                ExpandingSectionGroup {
                    currentIndex: 0

                    Repeater {
                        model: 5

                        ExpandingSection {
                            id: section

                            property int sectionIndex: model.index

                            //% "Section "
                            title: qsTrId("ui-component-gallery-panel-section") + (model.index + 1)

                            content.sourceComponent: Column {
                                width: section.width

                                Repeater {
                                    model: (section.sectionIndex + 1) * 2

                                    TextSwitch {

                                        //% "Option "
                                        text: qsTrId("ui-component-gallery-panel-option") + (model.index + 1)

                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    DockedPanel {
        id: progressPanel

        width: page.isPortrait ? parent.width : Theme.itemSizeExtraLarge + Theme.paddingLarge
        height: page.isPortrait ? Theme.itemSizeExtraLarge + Theme.paddingLarge : parent.height

        dock: page.isPortrait ? Dock.Bottom : Dock.Right

        ProgressCircle {
            id: progressCircle

            anchors.centerIn: parent

            NumberAnimation on value {
                from: 0
                to: 1
                duration: 1000
                running: progressPanel.expanded
                loops: Animation.Infinite
            }
        }
    }
}