<template>
  <section class="fullscreen-editor">
    <EditorTopToolbar
      :device-mode="deviceMode"
      :selected-selector="selectedSelector"
      :selected-hidden="selectedElementMeta.hidden"
      :insert-block-type="insertBlockType"
      :insert-block-type-options="insertBlockTypeOptions"
      :can-undo="canUndo"
      :can-redo="canRedo"
      @set-device-mode="setDeviceMode"
      @toggle-visibility="toggleSelectedBlockVisibility"
      @update:insert-block-type="insertBlockType = $event"
      @insert-before="insertBlockNearSelection('before')"
      @insert-after="insertBlockNearSelection('after')"
      @duplicate="duplicateSelectedBlock"
      @delete="deleteSelectedBlock"
      @undo="undoHistory"
      @redo="redoHistory"
      @back="goBack"
      @load-demo="loadDemoPage"
    />

    <el-alert
      v-if="errorMessage"
      type="error"
      :closable="false"
      :title="errorMessage"
      show-icon
    />

    <section class="fullscreen-editor__stage">
      <div class="fullscreen-editor__canvas-shell">
        <EditorCanvasFrame
          :base-url="baseUrl"
          :device-mode="deviceMode"
          :candidates="canvasCandidates"
          :selected-selector="selectedSelector"
          :preview-status="selectedPreviewSummary"
          :preview-operations="previewOperations"
          :feedback-summary="canvasFeedbackSummary"
          :bridge-command="canvasBridgeCommand"
          @select-candidate="selectCanvasCandidate"
          @hover-candidate="handleCanvasHover"
          @hover-clear="keepCurrentSelection"
          @hotspot-action="handleCanvasHotspotAction"
          @inline-attribute-change="handleInlineAttributeChange"
          @inline-style-change="handleInlineStyleChange"
          @inline-text-change="handleInlineTextChange"
          @canvas-ready="handleCanvasReady"
          @bridge-outbound="handleCanvasOutbound"
        />
      </div>
    </section>
  </section>
</template>

<script setup>
import { onBeforeUnmount, onMounted } from "vue"
import EditorCanvasFrame from "@/module/editor/components/EditorCanvasFrame.vue";
import EditorTopToolbar from "@/module/editor/components/EditorTopToolbar.vue";
import { useEditorWorkspacePage } from "@/module/editor/service/use-editor-workspace-page";

const {
  errorMessage,
  previewOperations,
  canvasCandidates,
  selectedPreviewSummary,
  canvasFeedbackSummary,
  selectedSelector,
  selectedElementMeta,
  canvasBridgeCommand,
  baseUrl,
  deviceMode,
  setDeviceMode,
  insertBlockType,
  insertBlockTypeOptions,
  toggleSelectedBlockVisibility,
  insertBlockNearSelection,
  duplicateSelectedBlock,
  deleteSelectedBlock,
  canUndo,
  canRedo,
  undoHistory,
  redoHistory,
  selectCanvasCandidate,
  loadDemoPage,
  handleCanvasReady,
  handleCanvasHotspotAction,
  handleInlineAttributeChange,
  handleInlineStyleChange,
  handleCanvasHover,
  handleInlineTextChange,
  keepCurrentSelection,
  handleCanvasOutbound,
  goBack,
} = useEditorWorkspacePage();

function onKeyDown(e) {
  const tag = document.activeElement?.tagName?.toLowerCase()
  if (tag === "input" || tag === "textarea" || tag === "select") return
  if (document.activeElement?.isContentEditable) return

  const mod = e.ctrlKey || e.metaKey
  if (!mod) return

  if (e.key === "z" && !e.shiftKey) {
    e.preventDefault()
    if (canUndo.value) undoHistory()
    return
  }
  if ((e.key === "y") || (e.key === "z" && e.shiftKey)) {
    e.preventDefault()
    if (canRedo.value) redoHistory()
  }
}

onMounted(() => window.addEventListener("keydown", onKeyDown))
onBeforeUnmount(() => window.removeEventListener("keydown", onKeyDown))
</script>

<style scoped>
.fullscreen-editor {
  min-height: 100vh;
  background: #f6f8fb;
}

.fullscreen-editor__stage {
  display: grid;
  min-height: calc(100vh - 72px);
}

.fullscreen-editor__canvas-shell :deep(.editor-canvas-frame) {
  min-height: calc(100vh - 72px);
  overflow: hidden;
  border-radius: 0;
  border: 0;
  box-shadow: none;
}
</style>
