import styled from '@emotion/styled';
import { observer } from 'mobx-react-lite';
import { useContext, useMemo, useState } from 'react';
// eslint-disable-next-line @suno-custom/no-react-icons -- grandfathered in, need to migrate
import { BiBone, BiDroplet } from 'react-icons/bi';
import { v4 as uuidv4 } from 'uuid';
import { useStores } from '@/app/(root)/AppProviders';
import { CreateIcon, MoreHorizontalIcon, PlusIcon } from '@/icons';
import Button, { ButtonSize, ButtonVariant } from '../button/Button';
import CloseButton from '../button/CloseButton';
import {
ContextMenuItem,
ContextMenuTrigger,
} from '../contextMenu/ContextMenu';
import SongPokemon from '../songPokemon/SongPokemon';
import { Tooltip } from '../tooltip/Tooltip';
import AddTracksModal from './AddTracksModal';
import StemsContext from './StemsContext';
const Wrapper = styled.div<{ active: boolean }>`
position: absolute;
top: 70px;
right: 10px;
bottom: 70px;
width: 360px;
z-index: 3;
transform: translateX(${({ active }) => (active ? '0%' : '110%')});
transition: transform 0.2s ease-in-out;
border-radius: 10px;
background-color: ${({ active }) => (active ? 'red' : 'blue')};
background-color: #181818;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.05);
display: grid;
grid-template-rows: auto 1fr auto;
`;
const Header = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
`;
const Body = styled.div`
padding: 10px;
display: flex;
flex-direction: column;
gap: 3px;
overflow-y: auto;
`;
const Footer = styled.div`
padding: 10px;
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid rgba(255, 255, 255, 0.05);
`;
const SongOutliner = styled.div<{ active: boolean; loading: boolean }>`
border: 1px solid ${({ active }) => (active ? 'white' : 'transparent')};
border-radius: 10px;
background-color: ${({ active }) =>
active ? 'rgba(255,255,255,0.1)' : 'transparent'};
opacity: ${({ loading }) => (loading ? 0.5 : 1)};
&:hover {
cursor: ${({ loading }) => (loading ? 'not-allowed' : 'pointer')};
}
> * {
pointer-events: ${({ loading }) => (loading ? 'none' : 'auto')};
}
`;
export default observer(function SelectedTrackSidebar() {
const {
stemTracks,
fullSongTrack,
updateTrack,
generateStemsForTrack,
selectedTrackId,
setSelectedTrackId,
} = useContext(StemsContext);
const isStemTrack =
selectedTrackId && stemTracks.some((t) => t.id === selectedTrackId);
const isFullSongTrack =
selectedTrackId && fullSongTrack.id === selectedTrackId;
const [showRemoveModal, setShowRemoveModal] = useState(false);
const { clips } = useStores();
const track = isStemTrack
? stemTracks.find((t) => t.id === selectedTrackId)!
: fullSongTrack;
const reversedStagedClips = useMemo(() => {
return [...track.stagedClips].reverse();
}, [track.stagedClips]);
if (!selectedTrackId || (!isStemTrack && !isFullSongTrack)) {
return ;
}
return (
{showRemoveModal && (
setShowRemoveModal(false)}
initialTask='remove'
/>
)}
{track.name}
setSelectedTrackId(null)} />
{reversedStagedClips.map((c) => (
ac.clipId === c)}
loading={clips.clipById[c]?.status !== 'complete'}
>
{
if (!selectedTrackId) return;
const duration = clip.metadata.duration;
if (!duration) return;
updateTrack(selectedTrackId!, (prev) => ({
...prev,
arrangedClips: [
{
startSeconds: 0,
readStartSeconds: 0,
endSeconds: duration,
id: uuidv4(),
clipId: clip.id,
title: clip.title || '',
contentSeconds: duration,
},
],
}));
}}
/>
))}
);
});