1import React from 'react';
2import { PlaylistDTO } from './types';
3import { Button, Card, LinkButton } from '@grafana/ui';
4import { contextSrv } from 'app/core/services/context_srv';
5
6interface Props {
7  setStartPlaylist: (playlistItem: PlaylistDTO) => void;
8  setPlaylistToDelete: (playlistItem: PlaylistDTO) => void;
9  playlists: PlaylistDTO[] | undefined;
10}
11
12export const PlaylistPageList = ({ playlists, setStartPlaylist, setPlaylistToDelete }: Props) => {
13  return (
14    <>
15      {playlists!.map((playlist: PlaylistDTO) => (
16        <Card heading={playlist.name} key={playlist.id.toString()}>
17          <Card.Actions>
18            <Button variant="secondary" icon="play" onClick={() => setStartPlaylist(playlist)}>
19              Start playlist
20            </Button>
21            {contextSrv.isEditor && (
22              <>
23                <LinkButton key="edit" variant="secondary" href={`/playlists/edit/${playlist.id}`} icon="cog">
24                  Edit playlist
25                </LinkButton>
26                <Button
27                  disabled={false}
28                  onClick={() => setPlaylistToDelete({ id: playlist.id, name: playlist.name })}
29                  icon="trash-alt"
30                  variant="destructive"
31                >
32                  Delete playlist
33                </Button>
34              </>
35            )}
36          </Card.Actions>
37        </Card>
38      ))}
39    </>
40  );
41};
42