import { fireEvent, render, screen } from "@testing-library/react";
import { describe, expect, it, vi } from "vitest";
import { CustomChannelHeader } from "./CustomChannelHeader";

// Mock stream-chat-react
vi.mock("stream-chat-react", () => ({
  ChannelHeader: ({ Avatar }: { Avatar?: () => React.ReactElement }) => (
    <div data-testid="channel-header">{Avatar && <Avatar />}</div>
  ),
  useChannelStateContext: () => ({
    channel: {
      id: "test-channel",
      data: {
        config: {
          name: "Test Channel",
        },
      },
    },
  }),
}));

// Mock ChannelBadge
vi.mock("./ChannelBadge", () => ({
  ChannelBadge: ({ displayTitle }: { displayTitle?: string }) => (
    <div data-testid="channel-badge">{displayTitle}</div>
  ),
}));

describe("CustomChannelHeader", () => {
  const mockTablos = [
    {
      id: "test-channel",
      name: "Test Tablo",
      color: "bg-blue-500",
      user_id: "user-id",
      access_level: "admin",
      is_admin: true,
      created_at: "2024-01-01T00:00:00Z",
      deleted_at: "2024-01-01T00:00:00Z",
      position: 0,
      status: "active",
      image: null,
    },
  ];

  it("renders without crashing", () => {
    render(<CustomChannelHeader tablos={mockTablos} />);
    expect(screen.getByTestId("channel-header")).toBeInTheDocument();
  });

  it("renders ChannelHeader component", () => {
    render(<CustomChannelHeader tablos={mockTablos} />);
    expect(screen.getByTestId("channel-header")).toBeInTheDocument();
  });

  it("shows toggle button when showToggleButton is true", () => {
    render(
      <CustomChannelHeader
        tablos={mockTablos}
        showToggleButton={true}
        onToggleChannelList={vi.fn()}
      />
    );
    const toggleButton = screen.getByLabelText("Toggle channel list");
    expect(toggleButton).toBeInTheDocument();
  });

  it("hides toggle button when showToggleButton is false", () => {
    render(
      <CustomChannelHeader
        tablos={mockTablos}
        showToggleButton={false}
        onToggleChannelList={vi.fn()}
      />
    );
    const toggleButton = screen.queryByLabelText("Toggle channel list");
    expect(toggleButton).not.toBeInTheDocument();
  });

  it("calls onToggleChannelList when toggle button is clicked", () => {
    const onToggleChannelList = vi.fn();
    render(
      <CustomChannelHeader
        tablos={mockTablos}
        onToggleChannelList={onToggleChannelList}
        showToggleButton={true}
      />
    );
    const toggleButton = screen.getByLabelText("Toggle channel list");
    fireEvent.click(toggleButton);
    expect(onToggleChannelList).toHaveBeenCalled();
  });

  it("applies rotation class when isChannelListExpanded is true", () => {
    const { container } = render(
      <CustomChannelHeader
        tablos={mockTablos}
        onToggleChannelList={vi.fn()}
        isChannelListExpanded={true}
        showToggleButton={true}
      />
    );
    const svg = container.querySelector(".rotate-180");
    expect(svg).toBeInTheDocument();
  });

  it("renders without toggle button when onToggleChannelList is not provided", () => {
    render(<CustomChannelHeader tablos={mockTablos} />);
    const toggleButton = screen.queryByLabelText("Toggle channel list");
    expect(toggleButton).not.toBeInTheDocument();
  });

  it("renders ChannelBadge with correct props", () => {
    render(<CustomChannelHeader tablos={mockTablos} />);
    expect(screen.getByTestId("channel-badge")).toBeInTheDocument();
  });
});
