import React, { useState } from "react";
import { ChatHeaderNavigation } from "./ChatHeaderNavigation";
import { ChatChannelList } from "./ChatChannelList";
import { SkeletonList } from "../SkeletonList";
import "./TableChatChannelHeader.styles.scss";

const TableChatChannelHeader = ({
  title = "Create new Chat",
  channels = [],
  selectedChannelOrChatId,
  onBack,
  onChannelSelect,
  onMenuClick,
  onSearchClick,
  onMoreClick,
  showChannelList,
  setShowPinnedMsg,
  onThreadClick,
  isSearchOpen,
  headerConfig,
  showAddChatBtn = true,
  showCheckbox,
  handleChatName,
  filterChannelsByTitle,
  loadingChannels,
  selectedChannelInfo,
  handleToast,
  onPinnedChatClick,
  onDeleteTopics,
  selectedChat,
  handleChatSelect,
  isCreateNewChatOpen,
  setIsCreateNewChatOpen,
}) => {
  const handleChannelSelect = (channelId, channelItem) => {
    onChannelSelect && onChannelSelect(channelId, channelItem);
  };

  const defaultChannels = [
    {
      id: "deal-overview",
      title: "Deal overview discussion",
      subtitle: "Let's review the latest changes to...",
      time: "11:56",
      unreadCount: 2,
      avatar: { label: "Deal overview discussion" },
    },
    {
      id: "vendor-negotiations",
      title: "Vendor negotiations",
      subtitle: "Let's review the latest changes to...",
      time: "11:56",
      unreadCount: 2,
      avatar: { label: "Vendor negotiations" },
    },
    {
      id: "contract-review",
      title: "Contract review",
      subtitle: "Let's review the latest changes to...",
      time: "11:56",
      unreadCount: 2,
      isMuted: true,
      avatar: { label: "Contract review" },
    },
  ];

  const channelsToShow = channels;
  return (
    <div className="table-left-panel-container">
      {loadingChannels ? (
        <div style={{ height: "100%" }}>
          <SkeletonList text="Loading messages..." />
        </div>
      ) : (
        <>
          <ChatHeaderNavigation
            title={title}
            onBack={onBack}
            onMenuClick={onMenuClick}
            onSearchClick={onSearchClick}
            onMoreClick={onMoreClick}
            showChannelList={showChannelList}
            setShowPinnedMsg={setShowPinnedMsg}
            onThreadClick={onThreadClick}
            isSearchOpen={isSearchOpen}
            headerConfig={headerConfig}
            showAddChatBtn={showAddChatBtn}
            showSearchChat={headerConfig?.showSearch}
            handleChatName={handleChatName}
            filterChannelsByTitle={filterChannelsByTitle}
            selectedChat={selectedChat}
            selectedChannelInfo={selectedChannelInfo}
            handleToast={handleToast}
            onDeleteTopics={onDeleteTopics}
            isCreateNewChatOpen={isCreateNewChatOpen}
            setIsCreateNewChatOpen={setIsCreateNewChatOpen}
          />

          <ChatChannelList
            channels={channelsToShow}
            selectedChannelOrChatId={selectedChannelOrChatId}
            onChannelSelect={handleChannelSelect}
            showChannelList={showChannelList}
            showCheckBox={headerConfig?.leftChatPanel}
            showCheckbox={showCheckbox}
            handleChatSelect={handleChatSelect}
            selectedChat={selectedChat}
            handleToast={handleToast}
            onPinnedChatClick={onPinnedChatClick}
          />
        </>
      )}
    </div>
  );
};

export default TableChatChannelHeader;
