import React from "react";
import { Avatar } from "../../../Avatar";
import NotificationsOffIcon from "@mui/icons-material/NotificationsOff";
import PinnedIcon from "../../../../assets/pinedIcon.svg";
import { UnreadBadge } from "./UnreadBadge/UnreadBadge";
import { ChannelCheckbox } from "./ChannelCheckbox/ChannelCheckbox";

export const ChatChannelItem = ({
  id,
  title,
  subtitle,
  timestamp,
  unreadCount,
  avatar,
  isSelected,
  isMuted,
  onClick,
  showChannelList,
  showCheckbox = true,
  handleChatSelect = { handleChatSelect },
  selectedChat,
  onPinnedChatClick,
  onPinnedChange,
  handleToast,
  isPinned: isPinnedProp,
  ...rest
}) => {
  const isPinned = Boolean(isPinnedProp ?? rest.isPinned);
  const handlePinnedChatClick = async (chatId, newPinned) => {
    if (onPinnedChatClick) {
      onPinnedChange?.(chatId, newPinned);
      try {
        const response = await onPinnedChatClick(chatId, newPinned);
        onPinnedChange?.(chatId, response);
      } catch (error) {
        onPinnedChange?.(chatId, !newPinned);
        handleToast(true, "Error pinning chat", "error");
        console.error("Error pinning chat:", error);
      }
    }
  };

  return (
    <div
      className={`${showChannelList ? "channel_list" : "chat_list"}  ${
        isSelected ? "selected" : ""
      } ${isMuted ? "muted" : ""}`}
      onClick={(e) => {
        e.stopPropagation();
        onClick && onClick(id);
      }}
      role="button"
      tabIndex={0}
      onKeyPress={(e) => {
        if (e.key === "Enter" || e.key === " ") onClick && onClick(id);
      }}
    >
      {!showChannelList && (
        <>
          {showCheckbox && (
            <ChannelCheckbox
              id={id}
              handleChatSelect={handleChatSelect}
              selectedChat={selectedChat}
            />
          )}

          <div className="channel-avatar">
            <Avatar
              size="medium"
              label={avatar?.label || title}
              src={avatar?.src}
            />
          </div>
        </>
      )}

      <div className="channel-content">
        <div className="channel-header">
          <h3 className="channel-title">{title}</h3>
          <div>
            {isMuted && (
              <NotificationsOffIcon fontSize="small" className="muted-icon" />
            )}
            <UnreadBadge count={unreadCount} />
          </div>
        </div>
        <p className="channel-subtitle">{subtitle}</p>
        <div className="pinnedChat_container">
          <span className="channel-time">{timestamp}</span>
          {!showChannelList && (
            <img
              src={PinnedIcon}
              alt=""
              role="button"
              tabIndex={0}
              aria-label={isPinned ? "Unpin chat" : "Pin chat"}
              className={isPinned ? "pinnedChat pinnedChat--active" : "pinnedChat"}
              onClick={(e) => {
                e.stopPropagation();
                handlePinnedChatClick(id, !isPinned);
              }}
              onKeyDown={(e) => {
                if (e.key === "Enter" || e.key === " ") {
                  e.preventDefault();
                  e.stopPropagation();
                  handlePinnedChatClick(id, !isPinned);
                }
              }}
            />
          )}
        </div>
      </div>
    </div>
  );
};
