import { ReactElement } from 'react';

import { Center, Flex, HStack, Text } from '@chakra-ui/react';
import { LuCrown, LuDisc3, LuEar, LuFileAudio } from 'react-icons/lu';
import { MdGroup } from 'react-icons/md';
import { useNavigate } from 'react-router-dom';

import { PageLayout } from '@/components/Layout/PageLayout';
import { TopBar } from '@/components/TopBar/TopBar';

import { useColorModeValue } from '@/components/ui/color-mode';

type HomeListType = {
  id: number;
  name: string;
  icon: ReactElement;
  to: string;
};
const homeList: HomeListType[] = [
  {
    id: 1,
    name: 'Genders',
    icon: <LuCrown style={{ width: "100px", height: "100px" }} />,
    to: 'gender',
  },
  {
    id: 2,
    name: 'Artists',
    icon: <MdGroup style={{ width: "100px", height: "100px" }} />,
    to: 'artist',
  },
  {
    id: 3,
    name: 'Albums',
    icon: <LuDisc3 style={{ width: "100px", height: "100px" }} />,
    to: 'album',
  },
  {
    id: 4,
    name: 'Tracks',
    icon: <LuFileAudio style={{ width: "100px", height: "100px" }} />,
    to: 'track',
  },
  {
    id: 5,
    name: 'Playlists',
    icon: <LuEar style={{ width: "100px", height: "100px" }} />,
    to: 'playlists',
  },
];

export const HomePage = () => {
  const navigate = useNavigate();
  const onSelectItem = (data: HomeListType) => {
    navigate(data.to);
  };
  return (
    <>
      <TopBar title="Home" />
      <PageLayout>
        <HStack wrap="wrap" /*spacing="20px"*/ marginX="auto" padding="20px" justify="center">
          {homeList.map((data) => (
            <Flex align="flex-start"
              width="200px"
              height="190px"
              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)}
            >
              <Flex direction="column" width="full" height="full">
                <Center height="full">{data.icon}</Center>
                <Center>
                  <Text
                    fontSize="25px"
                    fontWeight="bold"
                    textTransform="uppercase"
                    userSelect="none"
                  >
                    {data.name}
                  </Text>
                </Center>
              </Flex>
            </Flex>
          ))}
        </HStack>
      </PageLayout>
    </>
  );
};