const {Gdk, Gtk} = imports.gi
import {App, Service, Utils, Widget} from "../imports.js"
import Applications from "resource:///com/github/Aylur/ags/service/applications.js"
import Hyprland from "resource:///com/github/Aylur/ags/service/hyprland.js"
const {execAsync, exec} = Utils
const {Box, EventBox, Button, Label, Scrollable} = Widget

const CLIPBOARD_SHOWN_ENTRIES = 20

const ClipboardItems = () => {
  return Box({
    vertical: true,
    className: "spacing-v-5",
    connections: [
      [
        App,
        (box, name, visible) => {
          if (name != "sideleft") return

          let clipboardContents = exec("cliphist list") // Output is lines like this: 1000    copied text
          clipboardContents = clipboardContents.split("\n")

          // console.log(clipboardContents);
          // console.log(`bash -c 'echo "${clipboardContents[0]}" | sed "s/  /\\t/" | cliphist decode'`);
          // console.log(exec(`bash -c 'echo "${clipboardContents[0]}" | sed "s/  /\\t/" | cliphist decode'`));

          box.children = clipboardContents.map((text, i) => {
            if (i >= CLIPBOARD_SHOWN_ENTRIES) return
            return Button({
              onClicked: () => {
                print(
                  `bash` +
                    `-c` +
                    `echo "${clipboardContents[i]}" | sed "s/  /\\\t/" | cliphist decode | wl-copy`,
                )
                execAsync(
                  `bash`,
                  `-c`,
                  `echo "${clipboardContents[i]}" | sed "s/  /\\\t/" | cliphist decode | wl-copy`,
                ).catch(print)
                App.closeWindow("sideleft")
              },
              className: "sidebar-clipboard-item",
              child: Box({
                children: [
                  Label({
                    label: text,
                    className: "txt-small",
                    truncate: "end",
                  }),
                ],
              }),
            })
          })
        },
      ],
    ],
  })
}

export default () =>
  Box({
    vertical: true,
    children: [
      EventBox({
        onPrimaryClick: () => App.closeWindow("sideleft"),
        onSecondaryClick: () => App.closeWindow("sideleft"),
        onMiddleClick: () => App.closeWindow("sideleft"),
      }),
      ClipboardItems(),
      // Box({
      //     vertical: true,
      //     vexpand: true,
      //     className: 'sidebar-left',
      //     children: [
      //         Widget.Box({
      //             className: 'spacing-v-5',
      //             children: [
      //                 ClipboardItems(),
      //             ]
      //         })
      //     ],
      // }),
    ],
  })