import {
  beta,
  CordProvider,
  Inbox,
  PagePresence,
  PresenceObserver,
  useCordLocation,
} from "@cord-sdk/react";
import * as Popover from "@radix-ui/react-popover";
import { useUser } from "@/hooks/useUser";
import { BsChat, BsInbox } from "react-icons/bs";
import { Children, useRef } from "react";
import { useCurrentFlow } from "@/hooks/index";
import "./collaboration.css";
import styles from "../FlowBar/toolbar.module.css";

function Collaboration({ excludeViewer }: { excludeViewer?: boolean }) {
  const { user } = useUser();
  const floatingThreadsElementRef = useRef(null);
  const { flow } = useCurrentFlow();

  return (
    <>
      {flow?.flow_id && user?.collaboration_token && (
        <>
          <CordProvider clientAuthToken={user?.collaboration_token}>
            <beta.FloatingThreads
              ref={floatingThreadsElementRef}
              location={{ flow: flow.flow_id }}
              threadName={flow.name}
              showButton={false}
            />
            <Popover.Root>
              <Popover.Trigger asChild>
                <div className={styles.ToolbarItem}>
                  <div
                    onClick={() => {
                      // floatingThreadsElementRef.current?.createThread();
                    }}
                  >
                    <span className={styles.AvatarImage}>
                      <BsChat />
                    </span>
                  </div>
                </div>
              </Popover.Trigger>
            </Popover.Root>

            <Popover.Root>
              <Popover.Trigger asChild>
                <div className={styles.ToolbarItem}>
                  <div>
                    <span className={styles.AvatarImage}>
                      <BsInbox />
                    </span>
                  </div>
                </div>
              </Popover.Trigger>
              <Popover.Portal>
                <Popover.Content sideOffset={15}>
                  <Inbox showCloseButton={false} showSettings={false} />
                </Popover.Content>
              </Popover.Portal>
            </Popover.Root>

            <Popover.Root>
              <Popover.Trigger>
                <div
                  className={styles.ToolbarItem}
                  style={{ backgroundColor: "transparent" }}
                >
                  <PagePresence
                    onUpdate={(presence) => {}}
                    location={{ flow: flow.flow_id }}
                    excludeViewer={false} //{excludeViewer ?? false}
                  />
                </div>
              </Popover.Trigger>
            </Popover.Root>
          </CordProvider>
        </>
      )}
    </>
  );
}

export { Collaboration };
