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';

export type DisplayTrackProps = {
  track: Track;
  onClick?: () => void;
  contextMenu?: MenuElement[];
};
export const DisplayTrack = ({
  track,
  onClick,
  contextMenu,
}: DisplayTrackProps) => {
  const { trackActive } = useActivePlaylistService();
  return (
    <Flex direction="row" width="full" height="full">
      <Covers
        data={track?.covers}
        size="50"
        height="full"
        /* TODO: 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, 2]}
          marginY="auto"
          color={trackActive?.id === track.id ? 'green.700' : undefined}
        >
          [{track.track}] {track.name}
        </Text>
      </Flex>
      <ContextMenu elements={contextMenu} />
    </Flex>
  );
};