import styled from '@emotion/styled';
import clsx from 'clsx';
import { uniq } from 'lodash-es';
import { useCallback, useEffect, useState } from 'react';

import { useContextSelector } from '@/hooks/useContextSelector';
import {
  ClipZoomInIcon,
  FastForwardIcon,
  FollowPlayHeadIcon,
  LoopIcon,
  MinusIcon,
  MoreVerticalIcon,
  PauseIcon,
  PlayIcon,
  PlusIcon,
  RewindIcon,
  UploadIcon,
  VolumeMuteIcon,
  VolumeOnIcon,
} from '@/icons';
import ctrlStr from '@/utils/ctrlStr';
import { isDevOrStaging } from '@/utils/environment';
import sanitizeNumber from '@/utils/sanitizeNumber';

import Button, { ButtonVariant } from '../button/Button';
import { ResponsiveChild, useContainer } from '../containerQueries/components';
import { ContextMenuTrigger } from '../contextMenu/ContextMenu';
import { Tooltip } from '../tooltip/Tooltip';
import CurrentBPM from './CurrentBPM';
import Metronome from './Metronome';
import StudioContext from './StudioContext';
import StudioHorizontalFader, {
  dbToZeroOne,
  multiplierToScaledZeroOne,
  scaledZeroOneToMultiplier,
} from './StudioHorizontalFader';
import TempoPopup from './TempoPopup';
import TransportReadouts from './TransportReadouts';
import UploadButtonRenderer from './UploadButtonRenderer';
import addTrack from './actions/addTrack';
import setMasterAmplitude from './actions/setMasterAmplitude';
import toggleMetronome from './actions/toggleMetronome';
import toggleTimelineLoop, {
  DEFAULT_LOOP_DURATION_BEATS,
} from './actions/toggleTimelineLoop';
import { setPointSelection } from './actions/updateSelection';
import { TransportButton } from './components';
import {
  getSongEndBeats,
  getSongStartBeats,
  getStudioClips,
} from './selectors';
import useZoomButtons from './useZoomButtons';
import { formatDecibelValue } from './valueFormatting';

const Container = styled.div`
  width: 100%;
  height: 100%;
`;

const Wrapper = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  height: 100%;
  gap: 8px;
  user-select: none;
`;

const TransportSection = styled.div<{ tight?: boolean }>`
  display: flex;
  align-items: center;
  gap: ${({ tight }) => (tight ? '4px' : '10px')};
`;

// const ReadoutWrapper = styled.div`
//   height: 44px;
//   border-radius: 4px;
//   background-color: var(--color-background-secondary);
//   padding: 3px 8px 8px 8px;
//   display: flex;
//   align-items: center;
//   row-gap: 4px;
//   font-family: 'Input Sans', monospace;
//   text-transform: uppercase;
// `;

// const BeatsReadoutWrapper = styled(ReadoutWrapper)``;

// const SecondsReadoutWrapper = styled(ReadoutWrapper)``;

// const ReadoutNumberWrapper = styled.div<{ right?: boolean }>`
//   font-size: 22px;
//   line-height: 1;
//   font-weight: 100;
//   text-align: ${({ right }) => (right ? 'right' : 'left')};
//   white-space: nowrap;
// `;

// const ShadedSpan = styled.span`
//   color: var(--color-foreground-inactive-glass);
// `;

// const ReadoutNumber = ({
//   getValue,
//   digits,
//   prefix,
//   suffix,
//   right,
//   shadeLeadingZeroes = true,
// }: {
//   getValue: () => number;
//   digits: number;
//   prefix?: string;
//   right?: boolean;
//   suffix?: string;
//   shadeLeadingZeroes?: boolean;
// }) => {
//   const leadingZeroesRef = useRef<HTMLSpanElement>(null);
//   const mainDigitsRef = useRef<HTMLSpanElement>(null);

//   useAnimationFrame(() => {
//     const leadingZeroes = leadingZeroesRef.current;
//     const mainDigits = mainDigitsRef.current;

//     if (!leadingZeroes || !mainDigits) return;

//     const value = getValue().toFixed(0);
//     const valueLength = value.length;

//     if (valueLength < digits) {
//       leadingZeroes.textContent = new Array(digits - valueLength)
//         .fill('0')
//         .join('');
//     } else {
//       leadingZeroes.textContent = '';
//     }

//     mainDigits.textContent = value;
//   });

//   const totalChars = digits + (prefix?.length ?? 0) + (suffix?.length ?? 0);

//   return (
//     <ReadoutNumberWrapper right={right} style={{ width: totalChars * 17 }}>
//       {prefix && <ShadedSpan>{prefix}</ShadedSpan>}
//       {shadeLeadingZeroes && <ShadedSpan ref={leadingZeroesRef} />}
//       {!shadeLeadingZeroes && <span ref={leadingZeroesRef} />}
//       <span ref={mainDigitsRef}></span>
//       {suffix && <ShadedSpan>{suffix}</ShadedSpan>}
//     </ReadoutNumberWrapper>
//   );
// };

// const SHOW_BEATS_READOUT = false;

// const BeatsReadout = () => {
//   const { playbackController } = useContext(StudioContext);

//   return (
//     <BeatsReadoutWrapper>
//       <ReadoutNumber
//         getValue={() => {
//           const bars = Math.floor(playbackController.getCurrentBeats() / 4);
//           if (bars >= 0) {
//             return 1 + bars;
//           } else {
//             return bars;
//           }
//         }}
//         digits={3}
//       />
//       <ReadoutNumber
//         prefix='|'
//         right
//         getValue={() => 1 + ~~modulo(playbackController.getCurrentBeats(), 4)}
//         digits={1}
//       />
//     </BeatsReadoutWrapper>
//   );
// };

// const SecondsReadout = () => {
//   const { playbackController } = useContext(StudioContext);

//   return (
//     <SecondsReadoutWrapper>
//       <ReadoutNumber
//         shadeLeadingZeroes={false}
//         getValue={() => ~~(playbackController.getCurrentSeconds() / 60)}
//         digits={2}
//       />
//       <ReadoutNumber
//         prefix=':'
//         shadeLeadingZeroes={false}
//         getValue={() => Math.floor(playbackController.getCurrentSeconds() % 60)}
//         digits={2}
//       />
//       <ReadoutNumber
//         prefix='.'
//         shadeLeadingZeroes={false}
//         digits={3}
//         getValue={() =>
//           ~~modulo(playbackController.getCurrentSeconds() * 1000, 1000)
//         }
//       />
//     </SecondsReadoutWrapper>
//   );
// };

const curve = (x: number) => Math.pow(x, 0.5);
const uncurve = (x: number) => Math.pow(x, 2);
const MasterFader = () => {
  const [mute, setMute] = useState(false);
  const masterAmplitude = useContextSelector(
    StudioContext,
    (ctx) => ctx.state.amplitude
  );

  useEffect(() => {
    setMute(masterAmplitude === 0);
  }, [masterAmplitude]);

  const setMasterGain = useContextSelector(
    StudioContext,
    (ctx) => ctx.playbackController.setMasterGain
  );
  const [localMasterAmplitude, setLocalMasterAmplitude] =
    useState(masterAmplitude);

  useEffect(() => {
    setLocalMasterAmplitude(masterAmplitude);
  }, [masterAmplitude]);

  const getMasterMeter = useContextSelector(
    StudioContext,
    (ctx) => ctx.playbackController.getMasterMeter
  );
  const setState = useContextSelector(StudioContext, (ctx) => ctx.setState);
  const setLimiterParams = useContextSelector(
    StudioContext,
    (ctx) => ctx.playbackController.setLimiterParams
  );
  const [localLimiterParams, setLocalLimiterParams] = useState({
    lookaheadSeconds: 0.0279,
    attackSeconds: 0.0276,
    releaseSeconds: 0.026,
    preGainDb: 0,
    bypass: false,
    stereoLink: 0.8,
  });
  useEffect(() => {
    setLimiterParams(localLimiterParams);
  }, [localLimiterParams, setLimiterParams]);
  const changeLookaheadSeconds = useCallback(
    (value: number) => {
      setLocalLimiterParams({
        ...localLimiterParams,
        lookaheadSeconds: Math.max(0.0001, Math.min(1, uncurve(value))),
      });
    },
    [localLimiterParams, setLocalLimiterParams]
  );

  const changeAttackSeconds = useCallback(
    (value: number) => {
      setLocalLimiterParams({
        ...localLimiterParams,
        attackSeconds: Math.max(0.0001, Math.min(1, uncurve(value))),
      });
    },
    [localLimiterParams, setLocalLimiterParams]
  );

  const changeReleaseSeconds = useCallback(
    (value: number) => {
      setLocalLimiterParams({
        ...localLimiterParams,
        releaseSeconds: Math.max(0.0001, Math.min(1, uncurve(value))),
      });
    },
    [localLimiterParams, setLocalLimiterParams]
  );

  const changePreGainDb = useCallback(
    (value: number) => {
      setLocalLimiterParams({
        ...localLimiterParams,
        preGainDb: value,
      });
    },
    [localLimiterParams, setLocalLimiterParams]
  );

  const changeBypass = useCallback(
    (value: boolean) => {
      setLocalLimiterParams({
        ...localLimiterParams,
        bypass: value,
      });
    },
    [localLimiterParams, setLocalLimiterParams]
  );

  const changeStereoLink = useCallback(
    (value: number) => {
      setLocalLimiterParams({
        ...localLimiterParams,
        stereoLink: value,
      });
    },
    [localLimiterParams, setLocalLimiterParams]
  );

  return (
    <>
      {isDevOrStaging && (
        <ContextMenuTrigger
          ButtonComponent={(props) => (
            <Button {...props} icon={MoreVerticalIcon} />
          )}
          ContentsComponent={() => (
            <>
              <div className='flex min-w-[300px] flex-col gap-2 p-2'>
                <h4>Limiter Settings</h4>
                Lookahead:{' '}
                {localLimiterParams.lookaheadSeconds.toFixed(4) + 's'}
                <StudioHorizontalFader
                  color='var(--color-foreground-primary)'
                  value={curve(localLimiterParams.lookaheadSeconds)}
                  anchorValue={0.5}
                  onCommit={changeLookaheadSeconds}
                  defaultValue={curve(0.01)}
                  formatValue={(x) => uncurve(x).toFixed(4) + 's'}
                  tooltipPlacement='top'
                />
                Attack: {localLimiterParams.attackSeconds.toFixed(4) + 's'}
                <StudioHorizontalFader
                  color='var(--color-foreground-primary)'
                  value={curve(localLimiterParams.attackSeconds)}
                  onCommit={changeAttackSeconds}
                  anchorValue={0.5}
                  defaultValue={curve(0.01)}
                  formatValue={(x) => uncurve(x).toFixed(4) + 's'}
                  tooltipPlacement='top'
                />
                Release: {localLimiterParams.releaseSeconds.toFixed(4) + 's'}
                <StudioHorizontalFader
                  color='var(--color-foreground-primary)'
                  value={curve(localLimiterParams.releaseSeconds)}
                  onCommit={changeReleaseSeconds}
                  anchorValue={0.5}
                  defaultValue={curve(0.01)}
                  formatValue={(x) => uncurve(x).toFixed(4) + 's'}
                  tooltipPlacement='top'
                />
                Pre-Gain: {localLimiterParams.preGainDb.toFixed(1) + ' dB'}
                <StudioHorizontalFader
                  color='var(--color-foreground-primary)'
                  value={(localLimiterParams.preGainDb + 20) / 40} // Map -20dB to +20dB to 0-1
                  onCommit={(value) => changePreGainDb(value * 40 - 20)} // Map 0-1 to -20dB to +20dB
                  anchorValue={0.5} // 0 dB
                  defaultValue={0.5} // 0 dB
                  formatValue={(x) => (x * 40 - 20).toFixed(1) + ' dB'}
                  tooltipPlacement='top'
                />
                <div className='flex items-center gap-2'>
                  <input
                    type='checkbox'
                    checked={localLimiterParams.bypass}
                    onChange={(e) => changeBypass(e.target.checked)}
                    id='limiter-bypass'
                  />
                  <label htmlFor='limiter-bypass'>Bypass</label>
                </div>
                Stereo Link:{' '}
                {(localLimiterParams.stereoLink * 100).toFixed(0) + '%'}
                <StudioHorizontalFader
                  color='var(--color-foreground-primary)'
                  value={localLimiterParams.stereoLink}
                  onCommit={changeStereoLink}
                  anchorValue={0.8}
                  defaultValue={0.8}
                  formatValue={(x) => (x * 100).toFixed(0) + '%'}
                  tooltipPlacement='top'
                />
              </div>
            </>
          )}
        />
      )}
      <TransportButton
        variant={mute ? ButtonVariant.Primary : ButtonVariant.Tertiary}
        className={mute ? '!text-background-primary' : ''}
        icon={mute ? VolumeMuteIcon : VolumeOnIcon}
        onClick={() => {
          const newMute = !mute;
          setMute(newMute);
          setMasterGain(newMute ? 0 : localMasterAmplitude);
        }}
      />

      <div className='relative w-40'>
        <StudioHorizontalFader
          warnOnClip
          tooltipPlacement='top'
          defaultValue={dbToZeroOne(0)}
          anchorValue={dbToZeroOne(0)}
          value={mute ? 0 : multiplierToScaledZeroOne(localMasterAmplitude)}
          color='var(--color-foreground-primary)'
          onChange={(value) => {
            if (value > 0) setMute(false);
            const multiplier = sanitizeNumber(scaledZeroOneToMultiplier(value));
            setMasterGain(multiplier);
            setLocalMasterAmplitude(multiplier);
          }}
          onCommit={(value) => {
            if (value > 0) setMute(false);
            const multiplier = sanitizeNumber(scaledZeroOneToMultiplier(value));
            setMasterGain(multiplier);
            setLocalMasterAmplitude(multiplier);
            setState(setMasterAmplitude(multiplier));
          }}
          getMeterValue={getMasterMeter}
          disabled={false}
          formatValue={(x) => formatDecibelValue(scaledZeroOneToMultiplier(x))}
        />
      </div>
    </>
  );
};

export default function StudioTransport() {
  const { handleZoomInMouseDown, handleZoomOutMouseDown, resetZoom } =
    useZoomButtons();

  const setState = useContextSelector(StudioContext, (ctx) => ctx.setState);
  const playbackController = useContextSelector(
    StudioContext,
    (state) => state.playbackController
  );

  const previewingOnTimeline = useContextSelector(
    StudioContext,
    (ctx) => ctx.previewController.previewingOnTimeline
  );
  const previewingOffTimeline = useContextSelector(
    StudioContext,
    (ctx) => ctx.previewController.previewingOffTimeline
  );
  const stopPreviewing = useContextSelector(
    StudioContext,
    (ctx) => ctx.previewController.stopPreviewing
  );
  const stateRef = useContextSelector(StudioContext, (ctx) => ctx.stateRef);
  const loopEnabled = useContextSelector(
    StudioContext,
    (ctx) => ctx.state.loop.enabled
  );
  const timelineController = useContextSelector(
    StudioContext,
    (ctx) => ctx.timelineController
  );
  const recording = useContextSelector(
    StudioContext,
    (ctx) => ctx.recordingController.isRecording
  );
  const followMode = timelineController.followMode;

  const handleFollowPlayheadClick = useCallback(() => {
    timelineController.setFollowMode((prev) => !prev);
  }, [timelineController, followMode]);

  const handleLoopClick = useCallback(() => {
    const state = stateRef.current;
    const startBeats = state.loop.startBeats || 0;
    const endBeats =
      state.loop.endBeats === state.loop.startBeats
        ? state.loop.startBeats + DEFAULT_LOOP_DURATION_BEATS
        : state.loop.endBeats;
    setState(toggleTimelineLoop(startBeats, endBeats));
  }, [setState]);

  const handleBackToSectionStart = useCallback(() => {
    const state = stateRef.current;
    const currentBeats = playbackController.getCurrentBeats();
    const clips = getStudioClips(state) || [];
    const clipEndpoints = uniq(
      clips.flatMap((c) => [c.startBeats, c.endBeats])
    );

    const sectionStartBeats = clipEndpoints.reduce((acc, point) => {
      if (point > acc && point < currentBeats - 1) {
        return point;
      }
      return acc;
    }, getSongStartBeats(state));

    playbackController.seek(sectionStartBeats);
    if (!playbackController.playing && !previewingOnTimeline) {
      setState(setPointSelection(sectionStartBeats));
    }
  }, [playbackController, stateRef, setState, previewingOnTimeline]);

  const handleForwardToNextSectionStart = useCallback(() => {
    const state = stateRef.current;
    const currentBeats = playbackController.getCurrentBeats();
    const clips = getStudioClips(state) || [];
    const clipEndpoints = uniq(
      clips.flatMap((c) => [c.startBeats, c.endBeats])
    );

    const sectionStartBeats = clipEndpoints.reduce((acc, point) => {
      if (point < acc && point > currentBeats) {
        return point;
      }
      return acc;
    }, getSongEndBeats(state));

    playbackController.seek(sectionStartBeats);
    if (!playbackController.playing && !previewingOnTimeline) {
      setState(setPointSelection(sectionStartBeats));
    }
  }, [playbackController, stateRef, setState, previewingOnTimeline]);

  const handleAddTrack = useCallback(() => {
    setState(addTrack);
  }, [setState]);

  const handleToggleMetronome = useCallback(() => {
    setState(toggleMetronome());
  }, [setState]);

  const startRecording = useContextSelector(
    StudioContext,
    (ctx) => ctx.recordingController.startRecording
  );

  const metronomeEnabled = useContextSelector(
    StudioContext,
    (ctx) => ctx.state.metronome.enabled
  );

  const armedTrack = useContextSelector(StudioContext, (ctx) =>
    ctx.state.tracks.find((t) => t.arm && t.input)
  );

  const { containerRef, containerName } = useContainer();

  return (
    <Container ref={containerRef}>
      <Wrapper>
        <TransportSection>
          <ResponsiveChild containerName={containerName} hideBelowWidth={880}>
            <TransportButton
              variant={ButtonVariant.Tertiary}
              icon={PlusIcon}
              onClick={handleAddTrack}
            >
              Add Track
            </TransportButton>
            <UploadButtonRenderer
              renderButton={(handleUpload) => (
                <TransportButton
                  variant={ButtonVariant.Tertiary}
                  icon={UploadIcon}
                  onClick={handleUpload}
                >
                  Upload
                </TransportButton>
              )}
            />
          </ResponsiveChild>
          <ResponsiveChild containerName={containerName} showBelowWidth={880}>
            <Tooltip label='Add Track' placement='top'>
              <TransportButton
                variant={ButtonVariant.Tertiary}
                icon={PlusIcon}
                onClick={handleAddTrack}
              />
            </Tooltip>
            <Tooltip label='Upload' placement='top'>
              <UploadButtonRenderer
                renderButton={(handleUpload) => (
                  <TransportButton
                    variant={ButtonVariant.Tertiary}
                    icon={UploadIcon}
                    onClick={handleUpload}
                  />
                )}
              />
            </Tooltip>
          </ResponsiveChild>
        </TransportSection>

        <TransportSection tight>
          <ResponsiveChild containerName={containerName} hideBelowWidth={480}>
            <Tooltip label='Tempo' placement='top'>
              <ContextMenuTrigger
                placement='top-middle'
                menuClassName='!bg-transparent'
                ButtonComponent={(props) => (
                  <TransportButton
                    variant={ButtonVariant.Tertiary}
                    {...props}
                    className='min-w-[70px] font-mono'
                  >
                    <span className='-mt-[2px]'>
                      <CurrentBPM /> BPM
                    </span>
                  </TransportButton>
                )}
                ContentsComponent={TempoPopup}
              />
            </Tooltip>
          </ResponsiveChild>
          <ResponsiveChild containerName={containerName} hideBelowWidth={760}>
            <Tooltip label='Metronome' placement='top'>
              <TransportButton
                variant={
                  metronomeEnabled
                    ? ButtonVariant.Standard
                    : ButtonVariant.Tertiary
                }
                onClick={handleToggleMetronome}
              >
                <Metronome />
              </TransportButton>
            </Tooltip>
          </ResponsiveChild>

          <Tooltip
            label={
              armedTrack?.input
                ? 'Record'
                : 'No input selected. Choose an input and arm a track to record.'
            }
            placement='top'
          >
            <TransportButton
              disabled={!armedTrack?.input}
              variant={
                recording ? ButtonVariant.Standard : ButtonVariant.Tertiary
              }
              className={recording ? '' : 'hover:[&_.icon]:bg-red-500'}
              onClick={() => {
                if (recording) {
                  playbackController.setPlaying(false);
                } else {
                  if (armedTrack?.input) {
                    startRecording(
                      armedTrack.id,
                      armedTrack.input.id,
                      armedTrack.input.channel
                    );
                  }
                }
              }}
              icon={
                <div
                  className={clsx(
                    'icon rounded-full',
                    recording
                      ? 'scale-100 bg-accent-red-on-primary'
                      : 'scale-80 bg-foreground-inactive'
                  )}
                />
              }
            />
          </Tooltip>

          <ResponsiveChild containerName={containerName} hideBelowWidth={760}>
            <Tooltip label='Back to Section Start' placement='top'>
              <TransportButton
                variant={ButtonVariant.Tertiary}
                onClick={handleBackToSectionStart}
                icon={RewindIcon}
              />
            </Tooltip>
          </ResponsiveChild>

          <Tooltip label='Play/Pause (Spacebar)' placement='top'>
            {playbackController.playing && !previewingOffTimeline ? (
              <TransportButton
                variant={ButtonVariant.Tertiary}
                onClick={() => playbackController.setPlaying(false)}
                icon={PauseIcon}
              />
            ) : (
              <TransportButton
                variant={ButtonVariant.Tertiary}
                onClick={() => {
                  if (previewingOffTimeline) {
                    stopPreviewing();
                  }
                  setTimeout(() => {
                    playbackController.setPlaying(true);
                  }, 0);
                }}
                icon={PlayIcon}
              />
            )}
          </Tooltip>

          <ResponsiveChild containerName={containerName} hideBelowWidth={760}>
            <Tooltip label='Forward to Next Section Start' placement='top'>
              <TransportButton
                variant={ButtonVariant.Tertiary}
                onClick={handleForwardToNextSectionStart}
                icon={FastForwardIcon}
              />
            </Tooltip>
          </ResponsiveChild>

          <Tooltip label={`Loop [${ctrlStr} L]`} placement='top'>
            <TransportButton
              variant={
                loopEnabled ? ButtonVariant.Standard : ButtonVariant.Tertiary
              }
              icon={
                <LoopIcon className={loopEnabled ? 'text-accent-brand' : ''} />
              }
              onClick={handleLoopClick}
            />
          </Tooltip>

          <Tooltip label={`Follow Playhead [${ctrlStr} F]`} placement='top'>
            <TransportButton
              variant={
                followMode ? ButtonVariant.Standard : ButtonVariant.Tertiary
              }
              icon={
                <FollowPlayHeadIcon
                  className={followMode ? 'text-accent-success-on-primary' : ''}
                />
              }
              onClick={handleFollowPlayheadClick}
            />
          </Tooltip>

          <ResponsiveChild containerName={containerName} hideBelowWidth={760}>
            <TransportReadouts showBoth />
          </ResponsiveChild>

          <ResponsiveChild containerName={containerName} showBelowWidth={760}>
            <ResponsiveChild containerName={containerName} hideBelowWidth={480}>
              <TransportReadouts />
            </ResponsiveChild>
          </ResponsiveChild>
        </TransportSection>

        <TransportSection>
          <ResponsiveChild containerName={containerName} hideBelowWidth={1080}>
            <MasterFader />
          </ResponsiveChild>
          <ResponsiveChild containerName={containerName} hideBelowWidth={580}>
            <Tooltip label='Zoom Out' placement='top'>
              <TransportButton
                holdable
                variant={ButtonVariant.Tertiary}
                onMouseDown={handleZoomOutMouseDown}
                icon={<MinusIcon />}
              />
            </Tooltip>
            <Tooltip label='Zoom In' placement='top'>
              <TransportButton
                holdable
                variant={ButtonVariant.Tertiary}
                onMouseDown={handleZoomInMouseDown}
                icon={<PlusIcon />}
              />
            </Tooltip>
          </ResponsiveChild>
          <Tooltip label='Reset Zoom' placement='top'>
            <TransportButton
              variant={ButtonVariant.Tertiary}
              onClick={resetZoom}
              icon={<ClipZoomInIcon />}
            />
          </Tooltip>
        </TransportSection>
      </Wrapper>
    </Container>
  );
}

export const PlayButtonOnlyTransport = () => {
  const playbackController = useContextSelector(
    StudioContext,
    (state) => state.playbackController
  );
  const previewingOffTimeline = useContextSelector(
    StudioContext,
    (ctx) => ctx.previewController.previewingOffTimeline
  );
  const stopPreviewing = useContextSelector(
    StudioContext,
    (ctx) => ctx.previewController.stopPreviewing
  );

  return (
    <Wrapper
      style={{
        justifyContent: 'center',
        borderTop: '1px solid var(--color-border-primary)',
      }}
    >
      <TransportSection>
        <Tooltip label='Play/Pause (Spacebar)' placement='top'>
          {playbackController.playing && !previewingOffTimeline ? (
            <TransportButton
              variant={ButtonVariant.Tertiary}
              onClick={() => playbackController.setPlaying(false)}
              icon={PauseIcon}
            />
          ) : (
            <TransportButton
              variant={ButtonVariant.Tertiary}
              onClick={() => {
                if (previewingOffTimeline) {
                  stopPreviewing();
                }
                setTimeout(() => {
                  playbackController.setPlaying(true);
                }, 0);
              }}
              icon={PlayIcon}
            />
          )}
        </Tooltip>
      </TransportSection>
    </Wrapper>
  );
};