---
import type { MarkdownHeading } from "astro";
import Profile from "@/components/content/Profile.astro";
import Advertisement from "@/components/widget/Advertisement.astro";
import Announcement from "@/components/widget/Announcement.astro";
import Calendar from "@/components/widget/Calendar.astro";
import Categories from "@/components/widget/Categories.astro";
import SiteStats from "@/components/widget/SiteStats.astro";
import Tags from "@/components/widget/Tags.astro";
import type { WidgetComponentConfig } from "@/types/config";
import { widgetManager } from "@/utils/widget-manager";

interface Props {
	class?: string;
	headings?: MarkdownHeading[];
}

const { class: className, headings: _headings } = Astro.props;

// 获取左侧边栏的组件列表
const topComponents = widgetManager.getComponentsByPosition("top", "left");
const stickyComponents = widgetManager.getComponentsByPosition(
	"sticky",
	"left",
);

// 提取客户端需要的数据
const sidebarConfig = {
	shouldShowSidebar: {
		mobile: widgetManager.shouldShowSidebar("mobile"),
		tablet: widgetManager.shouldShowSidebar("tablet"),
		desktop: widgetManager.shouldShowSidebar("desktop"),
	},
};

// 组件映射表
const componentMap = {
	profile: Profile,
	announcement: Announcement,
	categories: Categories,
	tags: Tags,
	advertisement: Advertisement,
	stats: SiteStats,
	calendar: Calendar,
};

// 渲染组件的辅助函数
function renderComponent(
	component: WidgetComponentConfig,
	index: number,
	_components: WidgetComponentConfig[],
) {
	const ComponentToRender =
		componentMap[component.type as keyof typeof componentMap];
	if (!ComponentToRender) return null;

	const componentClass = widgetManager.getComponentClass(
		component,
		"left",
		index,
	);
	const componentStyle = widgetManager.getComponentStyle(component, index);

	return {
		Component: ComponentToRender,
		props: {
			class: componentClass,
			style: componentStyle,
			headings: undefined,
			configId: component.configId,
			...component.customProps,
		},
	};
}
---

<div id="left-sidebar" class:list={[className, "w-full"]}>
  <!-- 顶部固定组件区域 -->
  {
    topComponents.length > 0 && (
      <div class="flex flex-col w-full gap-4 mb-4">
        {topComponents.map((component, index) => {
          const renderData = renderComponent(component, index, topComponents);
          if (!renderData) return null;

          const { Component, props } = renderData;
          return <Component {...props} />;
        })}
      </div>
    )
  }

  <!-- 粘性组件区域 -->
  {
    stickyComponents.length > 0 && (
      <div
        id="left-sidebar-sticky"
        class="transition-all duration-700 flex flex-col w-full gap-4 sticky top-4"
      >
        {stickyComponents.map((component, index) => {
          const renderData = renderComponent(
            component,
            index,
            stickyComponents
          );
          if (!renderData) return null;

          const { Component, props } = renderData;
          return <Component {...props} />;
        })}
      </div>
    )
  }
</div>

<!-- 响应式样式和JavaScript -->
<style>
  /* 响应式断点样式 */
  @media (max-width: 768px) {
    #left-sidebar {
      display: var(--sidebar-mobile-display, block);
    }
  }

  @media (min-width: 769px) and (max-width: 1024px) {
    #left-sidebar {
      display: var(--sidebar-tablet-display, block);
    }
  }

  @media (min-width: 1025px) {
    #left-sidebar {
      display: var(--sidebar-desktop-display, block);
    }
  }
</style>

<script is:inline define:vars={{ sidebarConfig }}>
  // 响应式布局管理
  class LeftSidebarManager {
    constructor() {
      this.config = sidebarConfig;
    }
  }

  // 初始化左侧边栏管理器
  new LeftSidebarManager();
</script>
