import { Component, For } from 'solid-js';
import { A } from '@solidjs/router';
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarRail
} from '../ui/sidebar';
import "./style.css"
import { Compass, Heart, RefreshCw, Settings, Download } from 'lucide-solid';
import { useCategoriesStore } from '@/features/categories/store';
import { getIconComponent } from '@/lib/icon';

const menuItems = [
  {
    title: '探索发现',
    url: '/',
    icon: () => <Compass size={20} />
  },
  {
    title: '我的收藏',
    url: '/',
    icon: () => <Heart size={20} />
  },
  {
    title: '下载列表',
    url: '/',
    icon: () => <Download size={20} />
  }
];

const footerItems = [
  {
    title: '检查更新',
    url: '/update',
    icon: () => <RefreshCw size={20} />
  },
  {
    title: '应用设置',
    url: '/settings',
    icon: () => <Settings size={20} />
  }
];

const AppSidebar: Component = () => {
  const { categories } = useCategoriesStore();

  return (
    <Sidebar>
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>Spark Store</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              <For each={menuItems}>
                {(item) => (
                  <SidebarMenuItem>
                    <SidebarMenuButton as={A} href={item.url}>
                      {item.icon ? item.icon() : null}
                      <span>{item.title}</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                )}
              </For>
            </SidebarMenu>
          </SidebarGroupContent>
          <SidebarGroupLabel>应用分类</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              <For each={categories()}>
                {(category) => {
                  return (
                    <SidebarMenuItem>
                      <SidebarMenuButton as={A} href={`/categories/${category.id}`}>
                        {getIconComponent(category.icon)({
                            size: 20,
                            iconNode: []
                        })}
                        <span>{category.name_zh_cn}</span>
                      </SidebarMenuButton>
                    </SidebarMenuItem>
                  );
                }}
              </For>
            </SidebarMenu>
          </SidebarGroupContent>
          <SidebarGroupLabel>高级选项</SidebarGroupLabel>
          <SidebarGroupContent>
          <SidebarMenu>
          <For each={footerItems}>
            {(item) => (
              <SidebarMenuItem>
                <SidebarMenuButton as={A} href={item.url}>
                {item.icon ? item.icon() : null}
                  <span>{item.title}</span>
                </SidebarMenuButton>
              </SidebarMenuItem>
            )}
          </For>
        </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
      <SidebarRail />
    </Sidebar>
  );
};

export default AppSidebar;