import { Text, Wrap, WrapItem } from '@chakra-ui/react';
import { useNavigate } from 'react-router-dom';

import { PageLayout } from '@/components/Layout/PageLayout';
import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter';
import { TopBar } from '@/components/TopBar/TopBar';
import { DisplayAlbum } from '@/components/album/DisplayAlbum';
import { useAlbumService } from '@/service/Album';
import { useThemeMode } from '@/utils/theme-tools';

export const AlbumsPage = () => {
  const { store } = useAlbumService();
  const { mode } = useThemeMode();
  const navigate = useNavigate();
  const onSelectItem = (albumId: number) => {
    navigate(`/album/${albumId}`);
  };

  if (store.isLoading) {
    return (
      <>
        <TopBar />
        <PageLayoutInfoCenter>No Album available</PageLayoutInfoCenter>
      </>
    );
  }
  return (
    <>
      <TopBar />
      <PageLayout>
        <Text>All Albums:</Text>

        <Wrap spacing="20px" marginX="auto" padding="20px" justify="center">
          {store.data?.map((data) => (
            <WrapItem
              width="270px"
              height="120px"
              border="1px"
              borderColor="brand.900"
              backgroundColor={mode('#FFFFFF88', '#00000088')}
              key={data.id}
              padding="5px"
              as="button"
              _hover={{
                boxShadow: 'outline-over',
                bgColor: mode('#FFFFFFF7', '#000000F7'),
              }}
              onClick={() => onSelectItem(data.id)}
            >
              <DisplayAlbum dataAlbum={data} />
            </WrapItem>
          ))}
        </Wrap>
      </PageLayout>
    </>
  );
};