import { Button, Flex, Text, HStack } from '@chakra-ui/react';
import { LuUser } from 'react-icons/lu';
import { MdEdit, MdGroup } from 'react-icons/md';
import { Route, Routes, useNavigate, useParams } from 'react-router-dom';
import { Covers } from '@/components/Cover';
import { EmptyEnd } from '@/components/EmptyEnd';
import { PageLayout } from '@/components/Layout/PageLayout';
import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter';
import { BUTTON_TOP_BAR_PROPERTY, TopBar } from '@/components/TopBar/TopBar';
import { DisplayAlbumId } from '@/components/album/DisplayAlbumId';
import { ArtistEditPopUp } from '@/components/popup/ArtistEditPopUp';
import { useSpecificArtist } from '@/service/Artist';
import { useAlbumIdsOfAnArtist } from '@/service/Track';
import { useThemeMode } from '@/utils/theme-tools';
import { BASE_WRAP_HEIGHT, BASE_WRAP_SPACING, BASE_WRAP_WIDTH } from '@/constants/genericSpacing';
export const ArtistDetailPage = () => {
const { artistId } = useParams();
const artistIdInt = artistId ? parseInt(artistId, 10) : undefined;
const { mode } = useThemeMode();
const navigate = useNavigate();
const onSelectItem = (albumId: number) => {
navigate(`/artist/${artistIdInt}/album/${albumId}`);
};
const { dataArtist } = useSpecificArtist(artistIdInt);
const { albumIdsOfAnArtist } = useAlbumIdsOfAnArtist(artistIdInt);
if (!dataArtist) {
return (
<>
Fail to load artist id: {artistId}
>
);
}
return (
<>
<>
>
{dataArtist?.name}
{dataArtist?.description && (
Description: {dataArtist?.description}
)}
{dataArtist?.firstName && (
first name: {dataArtist?.firstName}
)}
{dataArtist?.surname && surname: {dataArtist?.surname}}
{dataArtist?.birth && birth: {dataArtist?.birth}}
{albumIdsOfAnArtist?.map((data) => (
onSelectItem(data)}
>
))}
} />
>
);
};