<template>
  <main class="main-content" @contextmenu="handleDesktopContextMenu">
    <div class="main-content-container">
      <TheClock
        v-if="showClock"
        :show-date="showDate"
        :show-seconds="showSeconds"
        :use-24-hour="use24Hour"
      />
      <TheSearchBar v-if="showSearch" />
      <GridCanvas />
    </div>
  </main>
</template>

<script setup lang="ts">

import { useUIStore } from '@/store/useUIStore';
import TheClock from '@/components/TheClock/index.vue';

import TheSearchBar from '@/components/TheSearchBar/index.vue';

import GridCanvas from '@/components/GridCanvas/index.vue';
import { useSettingsStore } from '@/store/useSettingsStore';
import { storeToRefs } from 'pinia';

const uiStore = useUIStore();
const settingsStore = useSettingsStore();
const { showSearch, showClock, showDate, showSeconds, use24Hour } = storeToRefs(settingsStore);

const handleDesktopContextMenu = (event: MouseEvent) => {
  const target = event.target as HTMLElement | null;
  if (!target) return;
  if (target.closest('.grid-item')) return;
  if (target.closest('.grid-canvas')) return;
  if (target.closest('input, textarea')) return;
  event.preventDefault();
  uiStore.openContextMenu(event.clientX, event.clientY, null, 'desktop');
};

</script>

<style lang="scss" scoped>
.main-content {
  padding-left: var(--sidebar-width); // 与侧栏宽度保持一致
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start; // 内容顶部对齐
  overflow-y: auto;
}

.main-content-container {
  width: 100%;
  max-width: var(--content-max-width); // 内容区域最大宽度
  padding: var(--content-padding); // 内容区内边距
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
