import { useState } from 'react';

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

import { Artist } from '@/back-api';
import { Covers } from '@/components/Cover';
import { EmptyEnd } from '@/components/EmptyEnd';
import { PageLayout } from '@/components/Layout/PageLayout';
import { SearchInput } from '@/components/SearchInput';
import { TopBar } from '@/components/TopBar/TopBar';
import { useArtistService, useOrderedArtists } from '@/service/Artist';
import { useThemeMode } from '@/utils/theme-tools';
import { BASE_WRAP_HEIGHT, BASE_WRAP_ICON_SIZE, BASE_WRAP_SPACING, BASE_WRAP_WIDTH } from '@/constants/genericSpacing';

export const ArtistsPage = () => {
  const { mode } = useThemeMode();
  const [filterName, setFilterName] = useState<string | undefined>(undefined);
  const navigate = useNavigate();
  const onSelectItem = (data: Artist) => {
    navigate(`/artist/${data.id}/`);
  };
  const { dataArtist } = useOrderedArtists(filterName);
  return (
    <>
      <TopBar title="All artists">
        <SearchInput onChange={setFilterName} />
      </TopBar>
      <PageLayout>
        <Wrap spacing={BASE_WRAP_SPACING} marginX="auto" padding="20px" justify="center">
          {dataArtist?.map((data) => (
            <WrapItem
              width={BASE_WRAP_WIDTH}
              height={BASE_WRAP_HEIGHT}
              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)}
            >
              <Flex direction="row" width="full" height="full">
                <Covers
                  data={data.covers}
                  size={BASE_WRAP_ICON_SIZE}
                  height="full"
                  iconEmpty={LuUser}
                />
                <Flex
                  direction="column"
                  width="150px"
                  maxWidth="150px"
                  height="full"
                  paddingLeft="5px"
                  overflowX="hidden"
                >
                  <Text
                    as="span"
                    align="left"
                    fontSize="20px"
                    fontWeight="bold"
                    userSelect="none"
                    marginRight="auto"
                    overflow="hidden"
                    noOfLines={[1, 2]}
                  >
                    {data.name}
                  </Text>
                </Flex>
              </Flex>
            </WrapItem>
          ))}
        </Wrap>
        <EmptyEnd />
      </PageLayout>
    </>
  );
};
