import React from 'react'
import {
BulkActionsToolbar,
DatagridLoading,
ListToolbar,
TextField,
useListController,
useRefresh,
useDataProvider,
useNotify,
} from 'react-admin'
import classnames from 'classnames'
import { Card, useMediaQuery } from '@material-ui/core'
import { makeStyles } from '@material-ui/core/styles'
import ReactDragListView from 'react-drag-listview'
import {
DurationField,
SongDetails,
SongContextMenu,
SongDatagrid,
} from '../common'
import AddToPlaylistDialog from '../dialogs/AddToPlaylistDialog'
import { AlbumLinkField } from '../song/AlbumLinkField'
const useStyles = makeStyles(
(theme) => ({
root: {},
main: {
display: 'flex',
},
content: {
marginTop: 0,
transition: theme.transitions.create('margin-top'),
position: 'relative',
flex: '1 1 auto',
[theme.breakpoints.down('xs')]: {
boxShadow: 'none',
},
},
bulkActionsDisplayed: {
marginTop: -theme.spacing(8),
transition: theme.transitions.create('margin-top'),
},
actions: {
zIndex: 2,
display: 'flex',
justifyContent: 'flex-end',
flexWrap: 'wrap',
},
noResults: { padding: 20 },
row: {
cursor: 'move',
},
}),
{ name: 'RaList' }
)
const useStylesListToolbar = makeStyles({
toolbar: {
justifyContent: 'flex-start',
},
})
const PlaylistSongs = (props) => {
const classes = useStyles(props)
const classesToolbar = useStylesListToolbar(props)
const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
const controllerProps = useListController(props)
const dataProvider = useDataProvider()
const refresh = useRefresh()
const notify = useNotify()
const { bulkActionButtons, expand, className, playlistId } = props
const { data, ids, version } = controllerProps
const anySong = data[ids[0]]
const showPlaceholder = !anySong || anySong.playlistId !== playlistId
const hasBulkActions = props.bulkActionButtons !== false
const reorder = (playlistId, id, newPos) => {
dataProvider
.update('playlistTrack', {
id,
data: { insert_before: newPos },
filter: { playlist_id: playlistId },
})
.then(() => {
refresh()
})
.catch(() => {
notify('ra.page.error', 'warning')
})
}
const onAddToPlaylist = (pls) => {
if (pls.id === props.id) {
refresh()
}
}
const handleDragEnd = (from, to) => {
const toId = ids[to]
const fromId = ids[from]
reorder(playlistId, fromId, toId)
}
return (
<>