import { Suspense } from 'react';

import { Flex, Text } from '@chakra-ui/react';
import { LuMusic2, LuPlay } from 'react-icons/lu';

import { Track } from '@/back-api';
import { Covers } from '@/components/Cover';
import { ContextMenu, MenuElement } from '@/components/contextMenu/ContextMenu';
import { useActivePlaylistService } from '@/service/ActivePlaylist';
import { useSpecificAlbum } from '@/service/Album';
import { useSpecificArtists } from '@/service/Artist';
import { useSpecificGender } from '@/service/Gender';

export type DisplayTrackProps = {
  track: Track;
  onClick?: () => void;
  contextMenu?: MenuElement[];
};
export const DisplayTrackFull = ({
  track,
  onClick,
  contextMenu,
}: DisplayTrackProps) => {
  const { trackActive } = useActivePlaylistService();
  const { dataAlbum } = useSpecificAlbum(track?.albumId);
  const { dataGender } = useSpecificGender(track?.genderId);
  const { dataArtists } = useSpecificArtists(track?.artists);
  return (
    <Flex direction="row" width="full" height="full"
      data-testid="display-track-full">
      <Covers
        data={track?.covers}
        size="60px"
        marginY="auto"
        iconEmpty={
          trackActive?.id === track.id ? <LuPlay /> : <LuMusic2 />
        }
        onClick={onClick}
      />
      <Flex
        direction="column"
        width="full"
        height="full"
        paddingLeft="5px"
        overflowX="hidden"
        onClick={onClick}
      >
        <Text
          as="span"
          alignContent="left"
          fontSize="20px"
          fontWeight="bold"
          userSelect="none"
          marginRight="auto"
          overflow="hidden"
          // TODO: noOfLines={1}
          color={trackActive?.id === track.id ? 'green.700' : undefined}
        >
          {track.name} {track.track && ` [${track.track}]`}
        </Text>
        {dataAlbum && (
          <Text
            as="span"
            alignContent="left"
            fontSize="15px"
            fontWeight="bold"
            userSelect="none"
            marginRight="auto"
            overflow="hidden"
            //noOfLines={1}
            marginY="auto"
            color={trackActive?.id === track.id ? 'green.700' : undefined}
          >
            <Text as="span" fontWeight="normal">Album:</Text> {dataAlbum.name}
          </Text>
        )}
        {dataArtists && (
          <Text
            as="span"
            alignContent="left"
            fontSize="15px"
            fontWeight="bold"
            userSelect="none"
            marginRight="auto"
            overflow="hidden"
            //noOfLines={1}
            marginY="auto"
            color={trackActive?.id === track.id ? 'green.700' : undefined}
          >
            <Text as="span" fontWeight="normal">Artist(s):</Text> {dataArtists.map((data) => data.name).join(', ')}
          </Text>
        )}
        {dataGender && (
          <Text
            as="span"
            alignContent="left"
            fontSize="15px"
            fontWeight="bold"
            userSelect="none"
            marginRight="auto"
            overflow="hidden"
            //noOfLines={1}
            marginY="auto"
            color={trackActive?.id === track.id ? 'green.700' : undefined}
          >
            <Text as="span" fontWeight="normal">Gender:</Text> {dataGender.name}
          </Text>
        )}
      </Flex>
      <ContextMenu elements={contextMenu}
        data-testid="display-track-full_context-menu" />
    </Flex>
  );
};