import type { TuiPlugin, TuiPluginModule } from "@saeeol/plugin/tui"
import { createMemo, Show } from "solid-js"
import { SaeeolNews } from "@/saeeol/components/news"

const id = "internal:home-news"

const tui: TuiPlugin = async (api) => {
  api.command.register(() => [
    {
      title: api.kv.get("news_hidden", false) ? "Show news" : "Hide news",
      value: "news.toggle",
      keybind: "news_toggle",
      category: "System",
      hidden: api.route.current.name !== "home",
      onSelect() {
        api.kv.set("news_hidden", !api.kv.get("news_hidden", false))
        api.ui.dialog.clear()
      },
    },
  ])

  api.slots.register({
    order: 50,
    slots: {
      home_bottom() {
        const hidden = createMemo(() => api.kv.get("news_hidden", false))
        return (
          <box width="100%" maxWidth={75} alignItems="center" paddingTop={2}>
            <Show when={!hidden()}>
              <SaeeolNews />
            </Show>
          </box>
        )
      },
    },
  })
}

const plugin: TuiPluginModule & { id: string } = {
  id,
  tui,
}

export default plugin
