import React from 'react';
import { useHistory } from 'react-router-dom';
import {
  withSiteId,
  multiview,
} from 'App/routes';
import { BackLink, Icon } from 'UI';
import cn from 'classnames';
import SessionMetaList from 'Shared/SessionItem/SessionMetaList';
import UserCard from '../ReplayPlayer/EventsBlock/UserCard';
import { PlayerContext } from 'Components/Session/playerContext';
import { observer } from 'mobx-react-lite';
import { useStore } from 'App/mstore'
import stl from '../ReplayPlayer/playerBlockHeader.module.css';
import AssistActions from 'Components/Assist/components/AssistActions';

function LivePlayerBlockHeader({
  isMultiview,
}: { isMultiview?: boolean }) {
  const [hideBack, setHideBack] = React.useState(false);
  const { store } = React.useContext(PlayerContext);
  const { assistMultiviewStore, projectsStore, customFieldStore, sessionStore } = useStore();
  const isAssist = window.location.pathname.includes('/assist/');
  const session = sessionStore.current;
  const closedLive = sessionStore.fetchFailed || (isAssist && !session.live);
  const siteId = projectsStore.siteId;
  const history = useHistory();
  const { width, height } = store.get();

  const metaList = customFieldStore.list.map((i: any) => i.key)

  React.useEffect(() => {
    const queryParams = new URLSearchParams(document.location.search);
    setHideBack(queryParams.has('iframe') && queryParams.get('iframe') === 'true');
  }, []);

  const backHandler = () => {
    history.goBack();
  };

  const { userId, metadata, isCallActive, agentIds } = session;
  let _metaList = Object.keys(metadata)
    .filter((i) => metaList.includes(i))
    .map((key) => {
      const value = metadata[key];
      return { label: key, value };
    });

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

  return (
    <div className={cn(stl.header, 'flex justify-between')}>
      <div className="flex w-full items-center">
        {!hideBack && (
          <div
            className="flex items-center h-full cursor-pointer group"
            onClick={() => (assistMultiviewStore.sessions.length > 1 || isMultiview ? openGrid() : backHandler())}
          >
            {assistMultiviewStore.sessions.length > 1 || isMultiview ? (
              <>
                <div className="rounded-full border group-hover:border-teal group-hover:text-teal group-hover:fill-teal p-1 mr-2">
                  <Icon name="close" color="inherit" size={13} />
                </div>
                <span className="group-hover:text-teal group-hover:fill-teal">
                  Close
                </span>
                <div className={stl.divider} />
              </>
            ) : (
              <>
                {/* @ts-ignore TODO */}
                <BackLink label="Back" className="h-full" />
                <div className={stl.divider} />
              </>
            )}
          </div>
        )}
        <UserCard className="" width={width} height={height} />

        <div className={cn('ml-auto flex items-center h-full', { hidden: closedLive })}>
          {_metaList.length > 0 && (
            <div className="border-l h-full flex items-center px-2">
              <SessionMetaList className="" metaList={_metaList} maxLength={2} />
            </div>
          )}

            <AssistActions userId={userId} isCallActive={isCallActive} agentIds={agentIds ?? []} />
        </div>
      </div>
    </div>
  );
}

const PlayerHeaderCont = observer(LivePlayerBlockHeader);

export default PlayerHeaderCont;