import { useState } from 'react';

import { Flex, HStack } from '@chakra-ui/react';
import { useNavigate } from 'react-router-dom';

import { EmptyEnd } from '@/components/EmptyEnd';
import { PageLayout } from '@/components/Layout/PageLayout';
import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter';
import { SearchInput } from '@/components/SearchInput';
import { TopBar } from '@/components/TopBar/TopBar';
import { DisplayAlbum } from '@/components/album/DisplayAlbum';
import { useColorModeValue } from '@/components/ui/color-mode';
import {
  BASE_WRAP_HEIGHT,
  BASE_WRAP_SPACING,
  BASE_WRAP_WIDTH,
} from '@/constants/genericSpacing';
import { useOrderedAlbums } from '@/service/Album';

export const AlbumsPage = () => {
  const [filterTitle, setFilterTitle] = useState<string | undefined>(undefined);
  const { isLoading, dataAlbums } = useOrderedAlbums(filterTitle);
  const navigate = useNavigate();
  const onSelectItem = (albumId: number) => {
    navigate(`/album/${albumId}`);
  };

  if (isLoading) {
    return (
      <>
        <TopBar title="All Albums" />
        <PageLayoutInfoCenter>No Album available</PageLayoutInfoCenter>
      </>
    );
  }

  return (
    <>
      <TopBar title="All Albums">
        <SearchInput onChange={setFilterTitle} />
      </TopBar>
      <PageLayout>
        <HStack
          wrap="wrap"
          gap={BASE_WRAP_SPACING}
          marginX="auto"
          padding="20px"
          justify="center"
        >
          {dataAlbums.map((data) => (
            <Flex
              align="flex-start"
              width={BASE_WRAP_WIDTH}
              height={BASE_WRAP_HEIGHT}
              border="1px"
              borderColor="brand.900"
              backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
              key={data.id}
              padding="5px"
              as="button"
              _hover={{
                boxShadow: 'outline-over',
                bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
              }}
              onClick={() => onSelectItem(data.id)}
            >
              <DisplayAlbum dataAlbum={data} />
            </Flex>
          ))}
        </HStack>
        <EmptyEnd />
      </PageLayout>
    </>
  );
};