feishin/src/renderer/features/playlists/components/playlist-detail-song-list-header.tsx

import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { Stack } from '@mantine/core';
import { MutableRefObject } from 'react';
import { useParams } from 'react-router';
import { LibraryItem } from '/@/renderer/api/types';
import { Badge, PageHeader, Paper, SpinnerIcon } from '/@/renderer/components';
import { usePlayQueueAdd } from '/@/renderer/features/player';
import { PlaylistDetailSongListHeaderFilters } from '/@/renderer/features/playlists/components/playlist-detail-song-list-header-filters';
import { usePlaylistDetail } from '/@/renderer/features/playlists/queries/playlist-detail-query';
import { LibraryHeaderBar } from '/@/renderer/features/shared';
import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
import { Play } from '/@/renderer/types';

interface PlaylistDetailHeaderProps {
  handleToggleShowQueryBuilder: () => void;
  itemCount?: number;
  tableRef: MutableRefObject<AgGridReactType | null>;
}

export const PlaylistDetailSongListHeader = ({
  tableRef,
  itemCount,
  handleToggleShowQueryBuilder,
}: PlaylistDetailHeaderProps) => {
  const { playlistId } = useParams() as { playlistId: string };
  const detailQuery = usePlaylistDetail({ id: playlistId });
  const handlePlayQueueAdd = usePlayQueueAdd();

  const handlePlay = async (playType: Play) => {
    handlePlayQueueAdd?.({
      byItemType: { id: [playlistId], type: LibraryItem.PLAYLIST },
      play: playType,
    });
  };

  const playButtonBehavior = usePlayButtonBehavior();

  if (detailQuery.isLoading) return null;
  const isSmartPlaylist = detailQuery?.data?.rules;

  return (
    <Stack spacing={0}>
      <PageHeader backgroundColor="var(--titlebar-bg)">
        <LibraryHeaderBar>
          <LibraryHeaderBar.PlayButton onClick={() => handlePlay(playButtonBehavior)} />
          <LibraryHeaderBar.Title>{detailQuery?.data?.name}</LibraryHeaderBar.Title>
          <Paper
            fw="600"
            px="1rem"
            py="0.3rem"
            radius="sm"
          >
            {itemCount === null || itemCount === undefined ? <SpinnerIcon /> : itemCount}
          </Paper>
          {isSmartPlaylist && <Badge size="lg">Smart playlist</Badge>}
        </LibraryHeaderBar>
      </PageHeader>
      <Paper p="1rem">
        <PlaylistDetailSongListHeaderFilters
          handleToggleShowQueryBuilder={handleToggleShowQueryBuilder}
          tableRef={tableRef}
        />
      </Paper>
    </Stack>
  );
};