import styled from '@emotion/styled';
import { observer } from 'mobx-react-lite';

import { useContextSelector } from '@/hooks/useContextSelector';

import SongQueuePanel from '../section/SongQueuePanel';
import StudioContext from '../studio/StudioContext';
import { Padding, Wrapper } from './common';

// Extend Wrapper with queue-specific overflow behavior
const QueueWrapper = styled(Wrapper)`
  overflow-y: auto;
  overflow-x: hidden;
`;

const QueuePanelContainer = styled.div`
  height: 100%;
`;

export default observer(function QueueLayout() {
  const hasStudioContext = useContextSelector(StudioContext, (ctx) => !!ctx);

  return (
    <QueueWrapper
      border={!hasStudioContext}
      className='animate-slide-in-bottom'
    >
      <Padding zero={!hasStudioContext} border={!hasStudioContext}>
        <QueuePanelContainer>
          <SongQueuePanel />
        </QueuePanelContainer>
      </Padding>
    </QueueWrapper>
  );
});