import { z } from "zod"
import { renderIcon } from "@pathmx/core/icons"
import { html, defineComponent, moduleRef, type Plugin } from "@pathmx/core"

/** Optional UI for the installed portable Settings plugin. */
export default function SettingsUIPlugin(): Plugin {
  return {
    id: "settings-ui",
    requires: ["settings"],
    components: [defineComponent({
      tag: "x-settings-ui-trigger",
      props: z.object({ section: z.string().default("theme") }),
      client: Object.assign(moduleRef(() => import("./launcher.ts")), { url: import.meta.resolve("./launcher.ts") }),
      render({ props }) {
          const section = props.section ?? "theme"
          return `<button class="pmx-button pmx-settings-trigger" data-shape="icon" data-size="sm" data-variant="outline" type="button" data-settings-section="${html`${section}`}" aria-label="Settings" title="Settings">${renderIcon("sliders-horizontal")}</button>`
      },
    })],
  }
}