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 (
      <>
        <TopBar title="Artist detail" />
        <PageLayoutInfoCenter>
          Fail to load artist id: {artistId}
        </PageLayoutInfoCenter>
      </>
    );
  }
  return (
    <>
      <TopBar>
        <>
          <Button
            {...BUTTON_TOP_BAR_PROPERTY}
            marginRight="auto"
            onClick={() => navigate(`/artist/all`)}
          >
            <MdGroup height="full" />
            <Text fontSize="24px" fontWeight="bold">
              Artists
            </Text>
          </Button>

          <Button
            {...BUTTON_TOP_BAR_PROPERTY}
            onClick={() =>
              navigate(`/artist/${artistId}/edit-artist/${artistId}`)
            }
          >
            <MdEdit />
          </Button>
        </>
      </TopBar>
      <PageLayout>
        <Flex
          direction="row"
          width="80%"
          marginX="auto"
          padding="10px"
          gap="10px"
        >
          <Covers
            data={dataArtist?.covers}
            // TODO: iconEmpty={LuUser}
            slideshow
          />
          <Flex direction="column" width="80%" marginRight="auto">
            <Text fontSize="24px" fontWeight="bold">
              {dataArtist?.name}
            </Text>
            {dataArtist?.description && (
              <Text>Description: {dataArtist?.description}</Text>
            )}
            {dataArtist?.firstName && (
              <Text>first name: {dataArtist?.firstName}</Text>
            )}
            {dataArtist?.surname && <Text>surname: {dataArtist?.surname}</Text>}
            {dataArtist?.birth && <Text>birth: {dataArtist?.birth}</Text>}
          </Flex>
        </Flex>

        <HStack wrap="wrap" /*spacing={BASE_WRAP_SPACING}*/ marginX="auto" padding="20px" justify="center">
          {albumIdsOfAnArtist?.map((data) => (
            <Flex align="flex-start"
              width={BASE_WRAP_WIDTH}
              height={BASE_WRAP_HEIGHT}
              border="1px"
              borderColor="brand.900"
              backgroundColor={mode('#FFFFFF88', '#00000088')}
              key={data}
              padding="5px"
              as="button"
              _hover={{
                boxShadow: 'outline-over',
                bgColor: mode('#FFFFFFF7', '#000000F7'),
              }}
              onClick={() => onSelectItem(data)}
            >
              <DisplayAlbumId id={data} key={data} />
            </Flex>
          ))}
        </HStack>
        <EmptyEnd />
        <Routes>
          <Route path="edit-artist/:artistId" element={<ArtistEditPopUp />} />
        </Routes>
      </PageLayout>
    </>
  );
};
