"use client";

import { useEffect } from "react";
import useExposeRefreshFunction from "./useExposeRefreshFunction";

export function EditorIntegrationClient({
  timings,
  mode,
}: {
  timings?: {
    [key: string]: number;
  };
  mode: "edit" | "preview" | "normal";
}) {
  useExposeRefreshFunction();

  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.ctrlKey && event.key === "F11") {
        event.preventDefault();
        window.parent.postMessage({ type: "editor-exitFullscreen" }, "*");
      }
      if (event.key === "F2") {
        event.preventDefault();
        window.parent.postMessage({ type: "editor-keyDown", key: "F2" }, "*");
      }
    };

    window.addEventListener("keydown", handleKeyDown);
    window.parent.postMessage({ type: "editor-timings", timings }, "*");

    return () => {
      window.removeEventListener("keydown", handleKeyDown);
    };
  }, []);

  if (mode !== "edit")
    return (
      <>
        <style>{`
        [contenteditable] {
          outline: 0px solid transparent;
        }
      `}</style>
      </>
    );

  return (
    <>
      <style>{`
        .a-editor-mce {
          display:flex;
          gap: 10px;
          padding: 30px;
          background-color: #f5f5f5;
          flex-wrap: wrap;          
          align-items: center;
        }
        .a-editor-mce-thumbnail {                   
          display:grid;
          padding: 10px;
          place-items: center;     
          overflow: hidden;     
        }
         .a-editor-mce-thumbnail--selected {
          box-shadow: 0 0 3px 3px rgb(75 89 255 / 50%);
         }
         .a-editor-mce-thumbnail:hover {
          box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
        }
        [contentEditable]:empty:before {
          content: attr(placeholder);
          opacity: 0.6;
        }

        [contenteditable] {
          outline: 0px solid transparent;
        }
      `}</style>
    </>
  );
}

export type ComponentSelectedEvent = {
  type: "componentSelected";
  componentIds: string[];
};