

export const MediasStartLetterDetailPage = () => {
  // const { startLetter } = useParams();
  // const { isLoading, MediasStartsWith } = useMediasWithStartName(
  //   startLetter !== '^^'
  //     ? startLetter
  //       ? [startLetter.toLowerCase(), startLetter.toUpperCase()]
  //       : 'ZZZZ'
  //     : [...alphabet, ...alphabet.map((str) => str.toUpperCase())],
  //   startLetter === '^^'
  // );
  // const { playInList } = useActivePlaylistService();
  // const onSelectItem = (MediaId: number) => {
  //   //navigate(`/Series/${SeriesIdInt}/Type/${TypeId}`);
  //   let currentPlay = 0;
  //   const listMediaId: number[] = [];
  //   if (!MediasStartsWith) {
  //     console.log('Fail to get Medias...');
  //     return;
  //   }
  //   for (let iii = 0; iii < MediasStartsWith.length; iii++) {
  //     listMediaId.push(MediasStartsWith[iii].id);
  //     if (MediasStartsWith[iii].id === MediaId) {
  //       currentPlay = iii;
  //     }
  //   }
  //   playInList(currentPlay, listMediaId);
  // };
  // console.log(
  //   `Redraw ... isLoading=${isLoading} data=${MediasStartsWith?.length} ... ${Date()}`
  // );
  // return (
  //   <>
  //     <TopBar title="All Medias" />
  //     <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={useColorModeValue('#FFFFFF88', '#00000088')}
  //               key={data}
  //               padding="5px"
  //               as="button"
  //               _hover={{
  //                 boxShadow: 'outline-over',
  //                 bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
  //               }}
  //             >
  //               <DisplayMediaSkeleton />
  //             </Box>
  //           ))}
  //         {!isLoading &&
  //           MediasStartsWith?.map((data) => (
  //             <Box
  //               minWidth="100%"
  //               //height="60px"
  //               border="1px"
  //               borderColor="brand.900"
  //               backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
  //               key={data.id}
  //               padding="5px"
  //               as="button"
  //               _hover={{
  //                 boxShadow: 'outline-over',
  //                 bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
  //               }}
  //             >
  //               <DisplayMediaFull
  //                 Media={data}
  //                 onClick={() => onSelectItem(data.id)}
  //               />
  //             </Box>
  //           ))}
  //         <EmptyEnd />
  //       </Flex>
  //     </PageLayout>
  //   </>
  // );
  return <>Not implemented</>;
};
