openreplay/frontend/app/components/Session_/Player/Controls/AssistSessionsTabs/AssistSessionsTabs.tsx

import React from 'react';
import cn from 'classnames';
import { Icon } from 'UI';
import { useStore } from 'App/mstore';
import { observer } from 'mobx-react-lite';
import { useHistory } from 'react-router-dom';
import { multiview, liveSession, withSiteId } from 'App/routes';

interface ITab {
  onClick?: () => void;
  classNames?: string;
  children: React.ReactNode;
  style?: Record<string, any>;
}

function Tab(props: ITab) {
  return (
    <div
      onClick={props.onClick}
      className={cn(
        'p-1 rounded flex items-center justify-center cursor-pointer',
        props.classNames,
      )}
      style={props.style}
    >
      {props.children}
    </div>
  );
}

export const InactiveTab = React.memo((props: Omit<ITab, 'children'>) => (
  <Tab
    onClick={props.onClick}
    classNames={cn('hover:bg-gray-bg bg-gray-light', props.classNames)}
  >
    <Icon name="plus" size="22" color="white" />
  </Tab>
));

const ActiveTab = React.memo((props: Omit<ITab, 'children'>) => (
  <Tab
    onClick={props.onClick}
    classNames="hover:bg-teal"
    style={{ background: 'rgba(57, 78, 255, 0.5)' }}
  >
    <Icon name="play-fill-new" size="22" color="white" />
  </Tab>
));

const CurrentTab = React.memo(() => (
  <Tab classNames="bg-teal color-white">
    <span style={{ fontSize: '0.65rem' }}>PLAYING</span>
  </Tab>
));

function AssistTabs({ session }: { session: Record<string, any> }) {
  const history = useHistory();
  const { assistMultiviewStore, projectsStore } = useStore();
  const siteId = projectsStore.siteId!;

  const placeholder = new Array(4 - assistMultiviewStore.sessions.length).fill(
    0,
  );

  React.useEffect(() => {
    if (assistMultiviewStore.sessions.length === 0) {
      assistMultiviewStore.setDefault(session);
    }
  }, []);

  const openGrid = () => {
    const sessionIdQuery = encodeURIComponent(
      assistMultiviewStore.sessions.map((s) => s.sessionId).join(','),
    );
    return history.push(withSiteId(multiview(sessionIdQuery), siteId));
  };
  const openLiveSession = (sessionId: string) => {
    assistMultiviewStore.setActiveSession(sessionId);
    history.push(withSiteId(liveSession(sessionId), siteId));
  };

  return (
    <div className="grid grid-cols-2 w-28 h-full" style={{ gap: '4px' }}>
      {assistMultiviewStore.sortedSessions.map(
        (session: { key: number; sessionId: string }) => (
          <React.Fragment key={session.key}>
            {assistMultiviewStore.isActive(session.sessionId) ? (
              <CurrentTab />
            ) : (
              <ActiveTab onClick={() => openLiveSession(session.sessionId)} />
            )}
          </React.Fragment>
        ),
      )}
      {placeholder.map((_, i) => (
        <React.Fragment key={i}>
          <InactiveTab onClick={openGrid} />
        </React.Fragment>
      ))}
    </div>
  );
}

export default observer(AssistTabs);