import { ReactElement } from 'react';

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

import { PageLayout } from '@/components/Layout/PageLayout';
import { TopBar } from '@/components/TopBar/TopBar';
import { DataTools, TypeCheck } from '@/utils/data-tools';
import { useThemeMode } from '@/utils/theme-tools';

export const alphabet = [
  'a',
  'b',
  'c',
  'd',
  'e',
  'f',
  'g',
  'h',
  'i',
  'j',
  'k',
  'l',
  'm',
  'n',
  'o',
  'p',
  'q',
  'r',
  's',
  't',
  'u',
  'v',
  'w',
  'x',
  'y',
  'z',
];
const possibilities = [...alphabet, '^^'];

export const TrackSelectionPage = () => {
  const { mode } = useThemeMode();
  const navigate = useNavigate();
  const onSelectItem = (data: string) => {
    navigate(`/track/${data}`);
  };
  return (
    <>
      <TopBar title="All Tracks" />
      <PageLayout>
        <Wrap spacing="20px" marginX="auto" padding="20px" justify="center">
          {possibilities.map((data) => (
            <WrapItem
              width="75px"
              height="75px"
              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)}
            >
              <Flex direction="column" width="full" height="full">
                <Text
                  margin="auto"
                  fontSize="25px"
                  fontWeight="bold"
                  textTransform="uppercase"
                  userSelect="none"
                >
                  {data.toUpperCase()}
                </Text>
              </Flex>
            </WrapItem>
          ))}
        </Wrap>
      </PageLayout>
    </>
  );
};