import { ReactElement } from 'react';

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

import { EmptyEnd } from '@/components/EmptyEnd';
import { PageLayout } from '@/components/Layout/PageLayout';
import { TopBar } from '@/components/TopBar/TopBar';
import { DisplayTrack } from '@/components/track/DisplayTrack';
import { DisplayTrackFull } from '@/components/track/DisplayTrackFull';
import { DisplayTrackSkeleton } from '@/components/track/DisplayTrackSkeleton';
import { alphabet } from '@/scene/track/TrackSelectionPage';
import { useActivePlaylistService } from '@/service/ActivePlaylist';
import { useTrackService, useTracksWithStartName } from '@/service/Track';
import { useThemeMode } from '@/utils/theme-tools';

export const TracksStartLetterDetailPage = () => {
  const { startLetter } = useParams();
  const { mode } = useThemeMode();
  const { isLoading, tracksStartsWith } = useTracksWithStartName(
    startLetter !== '^^'
      ? startLetter
        ? [startLetter.toLowerCase(), startLetter.toUpperCase()]
        : 'ZZZZ'
      : [...alphabet, ...alphabet.map((str) => str.toUpperCase())],
    startLetter === '^^'
  );
  const { playInList } = useActivePlaylistService();
  const onSelectItem = (trackId: number) => {
    //navigate(`/artist/${artistIdInt}/gender/${genderId}`);
    let currentPlay = 0;
    const listTrackId: number[] = [];
    if (!tracksStartsWith) {
      console.log('Fail to get tracks...');
      return;
    }
    for (let iii = 0; iii < tracksStartsWith.length; iii++) {
      listTrackId.push(tracksStartsWith[iii].id);
      if (tracksStartsWith[iii].id === trackId) {
        currentPlay = iii;
      }
    }
    playInList(currentPlay, listTrackId);
  };
  console.log(
    `Redraw ... isLoading=${isLoading} data=${tracksStartsWith?.length} ... ${Date()}`
  );
  return (
    <>
      <TopBar title="All Tracks" />
      <PageLayout>
        <Flex
          direction="column"
          gap="20px"
          marginX="auto"
          padding="20px"
          width="80%"
        >
          {isLoading &&
            [1, 2, 3, 4]?.map((data) => (
              <Box
                minWidth="100%"
                //height="60px"
                border="1px"
                borderColor="brand.900"
                backgroundColor={mode('#FFFFFF88', '#00000088')}
                key={data}
                padding="5px"
                as="button"
                _hover={{
                  boxShadow: 'outline-over',
                  bgColor: mode('#FFFFFFF7', '#000000F7'),
                }}
              >
                <DisplayTrackSkeleton />
              </Box>
            ))}
          {!isLoading &&
            tracksStartsWith?.map((data) => (
              <Box
                minWidth="100%"
                //height="60px"
                border="1px"
                borderColor="brand.900"
                backgroundColor={mode('#FFFFFF88', '#00000088')}
                key={data.id}
                padding="5px"
                as="button"
                _hover={{
                  boxShadow: 'outline-over',
                  bgColor: mode('#FFFFFFF7', '#000000F7'),
                }}
              >
                <DisplayTrackFull
                  track={data}
                  onClick={() => onSelectItem(data.id)}
                />
              </Box>
            ))}
          <EmptyEnd />
        </Flex>
      </PageLayout>
    </>
  );
};