Submatter/apps/web/components/chat/ChatSidebar.tsx

"use client";

import { useState } from "react";
import { cn } from "@/lib/utils";
import { useSidebarStore } from "@/lib/stores/sidebar-store";
import { ChatSectionHeader } from "./ChatSectionHeader";
import { ChatListRow } from "./ChatListRow";
import { usePathname } from "next/navigation";

export interface ChatSidebarProps {
  favorites: any[];
  channels: any[];
  dms: any[];
}

export default function ChatSidebar({ favorites, channels, dms }: ChatSidebarProps) {
  const pathname = usePathname();
  const isChatRoute = pathname.startsWith("/") && pathname.includes("/chat/");

  if (!isChatRoute) return null;

  const [searchQuery, setSearchQuery] = useState("");
  const [filter, setFilter] = useState("");
  const expandedSections = useSidebarStore((state) => state.expandedSections);
  const toggleSection = useSidebarStore((state) => state.toggleSection);

  const filterItems = (items: any[], query: string) => {
    if (!query) return items;
    return items.filter(
      (item) =>
        item.label.toLowerCase().includes(query.toLowerCase()) ||
        item.preview?.toLowerCase().includes(query.toLowerCase())
    );
  };

  const filteredFavorites = filterItems(favorites, searchQuery);
  const filteredChannels = filterItems(channels, searchQuery);
  const filteredDms = filterItems(dms, searchQuery);

  return (
    <div className="chat-sidebar w-64 bg-background text-foreground h-full flex flex-col">
      <div className="p-2 border-b border-sidebar-border">
        <input
          type="text"
          placeholder="Search chats"
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
          className="w-full mb-2 p-2 border border-sidebar-rounded bg-background"
        />
        <select
          value={filter}
          onChange={(e) => setFilter(e.target.value)}
          className="w-full p-2 border border-sidebar-rounded bg-background"
        >
          <option value="">All</option>
          <option value="unread">Unread</option>
          <option value="favorites">Favorites</option>
        </select>
      </div>

      <div className="flex-1 overflow-y-auto">
        {/* Favorites Section */}
        <ChatSectionHeader
          title="Favorites"
          isExpanded={expandedSections.favorites}
          onToggle={() => toggleSection("favorites")}
          onAdd={() => console.log("Add favorite")}
          onMore={() => console.log("More favorites")}
        />
        {expandedSections.favorites && (
          <div className="px-2">
            {filteredFavorites.map((item) => (
              <ChatListRow
                key={item.id}
                label={item.label}
                type={item.type}
                id={item.id}
                count={item.count}
                preview={item.preview}
              />
            ))}
          </div>
        )}

        {/* Channels Section */}
        <ChatSectionHeader
          title="Channels"
          isExpanded={expandedSections.channels}
          onToggle={() => toggleSection("channels")}
          onAdd={() => console.log("Add channel")}
          onMore={() => console.log("More channels")}
        />
        {expandedSections.channels && (
          <div className="px-2">
            {filteredChannels.map((item) => (
              <ChatListRow
                key={item.id}
                label={item.label}
                type={item.type}
                id={item.id}
                count={item.count}
                preview={item.preview}
              />
            ))}
          </div>
        )}

        {/* DMs Section */}
        <ChatSectionHeader
          title="DMs"
          isExpanded={expandedSections.dms}
          onToggle={() => toggleSection("dms")}
          onAdd={() => console.log("Add DM")}
          onMore={() => console.log("More DMs")}
        />
        {expandedSections.dms && (
          <div className="px-2">
            {filteredDms.map((item) => (
              <ChatListRow
                key={item.id}
                label={item.label}
                type={item.type}
                id={item.id}
                count={item.count}
                preview={item.preview}
              />
            ))}
          </div>
        )}
      </div>
    </div>
  );
}