import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.3

import Qt.labs.folderlistmodel 2.15
import QtQml.Models 2.15

import "qrc:/src/widgets"

Window {
  width: 700
  height: 500
  visible: true
  title: qsTr("reaction image manager")
  flags: Qt.Dialog
  id: window;

  property string background: "#282C34";
  property string emphasis:   "#50536b";
  property string foreground: "#abb2bf";
  property string text:       "#dfdfdf";
  property string textAlt:    "#b2b2b2";

  Component {
    id: delegate

    Item {
      width: imageList.cellWidth
      height: imageList.cellHeight
      clip: true

      Column {
        anchors.fill: parent
        topPadding: 5

        Reaction {
          anchors.horizontalCenter: parent.horizontalCenter

          path: fileUrl
          width: Math.min(parent.width, parent.height) - label.height
          height: Math.min(parent.width, parent.height) - label.height
        }

        Text {
          id: label
          anchors.horizontalCenter: parent.horizontalCenter
          text: fileName
          color: window.foreground
        }
      }
    }
  }

  Rectangle {
    anchors.fill: parent
    color: window.background
  }

  Column {
    anchors.fill: parent

    TextField {
      id: text
      placeholderText: qsTr("Search")
      focus: true

      height: 40
      width: parent.width

      style: TextFieldStyle {
        textColor: window.text
        placeholderTextColor: window.textAlt

        background: Rectangle {
          radius: 2
          implicitWidth: 100
          implicitHeight: 24
          border.color: "#333"
          border.width: 1
          color: window.background
        }
      }

      onTextChanged: () => {
        backingModel.nameFilters = makeFilter(text.text)
        imageList.currentIndex = 0
        imageList.moveCurrentIndexRight()
      }

      Keys.onPressed: {
        if (event.key == Qt.Key_Tab || event.key == Qt.Key_Right) {
          event.accepted = true
          imageList.moveCurrentIndexRight()
        } else if (event.key == Qt.Key_Up) {
          event.accepted = true
          imageList.moveCurrentIndexUp()
        } else if (event.key == Qt.Key_Down) {
          event.accepted = true
          imageList.moveCurrentIndexDown()
        } else if (event.key == Qt.Key_Left) {
          event.accepted = true
          imageList.moveCurrentIndexLeft()
        } else if (event.key == Qt.Key_Escape) {
          Qt.quit()
        }
      }

      onAccepted: {
        clipboard.setClipboard(backingModel.get(imageList.currentIndex, 'fileUrl') || backingModel.get(0, 'fileUrl'));
      }
    }

    Row {
      width: parent.width
      height: parent.height - 40

      Rectangle {
        width: 2 * (parent.width / 3)
        height: parent.height
        color: window.background

        GridView {
          id: imageList
          anchors.fill: parent

          clip: true

          keyNavigationWraps: true
          flickableDirection: Flickable.AutoFlickDirection

          cellWidth: parent.width / 3;
          cellHeight: imageList.cellWidth

          snapMode: GridView.SnapToRow

          model: FolderListModel {
            id: backingModel
            nameFilters: makeFilter("")
            folder: "file:" + Qt.application.arguments[1]
          }

          delegate: delegate

          highlight: Rectangle {
            color: window.emphasis
            radius: 5
          }
        }
      }

      Reaction {
        width: parent.width / 3
        height: parent.height
        path: backingModel.get(imageList.currentIndex, 'fileUrl') || backingModel.get(0, 'fileUrl')
      }
    }
  }

  function makeFilter(text) {
    if (text.indexOf("*") !== -1) {
      return [text]
    }

    return [
      "*" + text + "*.png",
      "*" + text + "*.gif",
      "*" + text + "*.jpg",
      "*" + text + "*.jpeg",
    ]
  }
}