import { Plugin, PluginType } from "https://viapak.xyz/@divzero/core@0.0.1/plugin.ts";

const ComponentPlugin1 = new Plugin({
  name: "Component Plugin 1",
  slug: "test-1",
  version: "0.0.0"
})

interface MenuItem {
  text: string
  url: string
}
type Menu = MenuItem[]

const NavbarSchema = {
  app_name: { type: "string", required: true },
  logo_url: "string",
  logo_on_right: "boolean",
  menu: { $ref: "menu", required: true },
  cta: { $ref: "menu" }
};
type ExtractedNavbarSchema = {
  app_name: string,
  logo_url?: string,
  logo_on_right?: boolean
  menu: Menu,
  cta: Menu
}

ComponentPlugin1.registerAs(PluginType.ComponentProvider, {
  components: [{
    id: "navbar",
    label: "Navbar",
    schema: NavbarSchema,
    render({ app_name, logo_url, logo_on_right, menu, cta }: ExtractedNavbarSchema) {
      return (
        <div class="navbar bg-base-100 shadow-sm">
          <div class="navbar-start">
            <div class="dropdown">
              <div tabindex={0} role="button" class="btn btn-ghost lg:hidden">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" /> </svg>
              </div>
              <ul
                tabindex={0}
                class="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow">
                { menu.map(item => (
                  <li><a href={item.url}>{ item.text }</a></li>
                ))}
              </ul>
            </div>
            <div class={`flex ${logo_on_right ? 'flex-row-reverse' : ''} gap-2`}>
              { logo_url &&
                <img src={logo_url} class="h-6" />
              }
              <a class="btn btn-ghost text-xl">{ app_name }</a>
            </div>
          </div>
          <div class="navbar-center hidden lg:flex">
            <ul class="menu menu-horizontal px-1">
              { menu.map(item => (
                <li><a href={item.url}>{ item.text }</a></li>
              ))}
            </ul>
          </div>
          <div class="navbar-end">
            { cta.filter((_, i) => i == 0).map(item => (
              <a class="btn" href={item.url}>{ item.text }</a>
            ))}
          </div>
        </div>
      )
    }
  }]
})

export default ComponentPlugin1;