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

import { Media } from '@/back-api';
import { Covers } from '@/components/Cover';
import { ContextMenu, MenuElement } from '@/components/contextMenu/ContextMenu';
import { useActivePlaylistService } from '@/service/ActivePlaylist';

export type DisplayMediaProps = {
  media: Media;
  onClick?: () => void;
  contextMenu?: MenuElement[];
};
export const DisplayMedia = ({
  media,
  onClick,
  contextMenu,
}: DisplayMediaProps) => {
  const { MediaActive } = useActivePlaylistService();
  return (
    <Flex direction="row" width="full" height="full">
      <Covers
        data={media?.covers}
        size="50"
        height="full"
        iconEmpty={MediaActive?.id === media.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={MediaActive?.id === media.id ? 'green.700' : undefined}
        >
          [{media.episode}] {media.name}
        </Text>
      </Flex>
      <ContextMenu elements={contextMenu} />
    </Flex>
  );
};
