import type { Config, Item, Page } from "#/lib/config/types.ts";
import { useState } from "preact/hooks";


interface MagicPageProps {
  config: Config;
  page: Page;
}


export default function MagicPage(props: MagicPageProps) {
  const {page, config} = props
  const [iframeUrl, setIframeUrl]= useState<string | undefined>(undefined)
  return (
    <div class="flex flex-row h-full">
      <div class="mx-auto flex flex-col justify-top">
        {
          page?.categories?.map((category, idx) => {
            return (
              <div class="mb-8" key={category.name || `category-idx-${idx}`}>
                <h2 class="text-2xl font-bold">{category.name}</h2>
                <div class="flex flex-row">
                  {
                    category.items?.map((item,idx) => {
                      return (
                        <div class="bg-white pr-2 py-2" key={item.name || `item-idx-${idx}`}>
                          <div
                            class={`hover:cursor-pointer`}
                            onMouseDown={(e)=>{
                              console.log("click event", e)
                              if(e.buttons === 4) {
                                globalThis.window.open(item.href, "_blank")
                              } else if(e.buttons === 1) {
                                if(item.iframe) {
                                  setIframeUrl(item.href)
                                } else{
                                  globalThis.window.open(item.href, "_blank")
                                }
                              }
                            }}>
                            <h3
                              class={`text-md text-cyan-800 hover:underline`}>{item.iframe && "!"}{item.name}</h3>
                          </div>
                        </div>
                      );
                    })
                  }
                </div>
              </div>
            );
          })
        }
      </div>
      <div class="flex grow">
        {iframeUrl &&
        <iframe
          class="w-full h-full"
          src={iframeUrl}
        ></iframe>
        }
      </div>
    </div>
  );
}