import { UserTablo } from "@xtablo/shared/types/tablos.types";
import { ChannelHeader, useChannelStateContext } from "stream-chat-react";
import { ChannelBadge } from "./ChannelBadge";

interface CustomChannelHeaderProps {
  tablos: UserTablo[];
  onToggleChannelList?: () => void;
  isChannelListExpanded?: boolean;
  showToggleButton?: boolean;
}

export const CustomChannelHeader = ({
  tablos,
  onToggleChannelList,
  isChannelListExpanded = false,
  showToggleButton = true,
}: CustomChannelHeaderProps) => {
  const { channel } = useChannelStateContext();

  return (
    <div className="flex items-center">
      {showToggleButton && onToggleChannelList && (
        <button
          onClick={onToggleChannelList}
          className="mr-2 p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
          aria-label="Toggle channel list"
        >
          <svg
            className={`w-5 h-5 transition-transform duration-200 ${
              isChannelListExpanded ? "rotate-180" : ""
            }`}
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
          </svg>
        </button>
      )}
      <ChannelHeader
        Avatar={() => {
          return (
            <ChannelBadge
              tablo={tablos?.find((t) => t.id === channel?.id) ?? null}
              displayTitle={channel?.data?.config?.name}
              isOnline={false}
            />
          );
        }}
      />
    </div>
  );
};
