import { ArrowRight, User } from "lucide-react";
import { ThreadParticipant, ThreadDetail } from "../../../src/api/types/models";
import { Link, useNavigate } from "@remix-run/react";
import SellerLogo from "~/components/SellerLogo";
import { useRootData } from "~/hooks/use-root-data";
import { safeGoBack } from "~/utils/helpers";
// Header component for the chat
const ChatHeader = ({
  otherParticipant,
  isConnected,
  threadDetails,
}: {
  otherParticipant: ThreadParticipant | undefined;
  isConnected: boolean;
  threadDetails: ThreadDetail | undefined;
}) => {
  const { theme } = useRootData();
  const navigate = useNavigate();
  return (
    <div className="max-w-md mx-auto flex flex-row h-[calc(65px_+_env(safe-area-inset-top))] pt-[env(safe-area-inset-top)] bg-WHITE fixed top-0 left-0 w-full items-center justify-center border-b border-inner-border z-10">
      <ArrowRight
        onClick={() => safeGoBack(navigate)}
        className="absolute top-[calc(1.25rem_+_env(safe-area-inset-top))] right-5"
      />
      {isConnected ? (
        <Link
          to={`/seller/${otherParticipant?.storeUsername}`}
          className="flex gap-2"
        >
          {threadDetails?.isCreator ? (
            <SellerLogo
              src={otherParticipant?.storeLogo}
              alt={"seller-image"}
            />
          ) : (
            <User
              size={48}
              className={theme === "dark" ? "text-WHITE" : "text-BLACK"}
            />
          )}
          <div
            className="flex flex-col items-center justify-center"
            style={{ gap: "0" }}
          >
            <p className="text-B12 font-bold text-overflow-ellipsis overflow-hidden whitespace-nowrap">
              {threadDetails?.isCreator
                ? otherParticipant?.storeName || otherParticipant?.username
                : otherParticipant?.name}
            </p>
          </div>
        </Link>
      ) : (
        <div className="flex items-center justify-center h-full">
          <p className="text-R12 text-GRAY">در حال اتصال...</p>
        </div>
      )}
    </div>
  );
};
export default ChatHeader;