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';
import { useSpecificSeason } from '@/service/Season';
import { useSpecificSeries } from '@/service/Series';
import { useSpecificType } from '@/service/Type';

export type DisplayMediaProps = {
  media: Media;
  onClick?: () => void;
  contextMenu?: MenuElement[];
};
export const DisplayMediaListFull = ({
  media,
  onClick,
  contextMenu,
}: DisplayMediaProps) => {
  const { MediaActive } = useActivePlaylistService();
  const { dataSeason } = useSpecificSeason(media?.seasonId);
  const { dataType } = useSpecificType(media?.typeId);
  const { dataSeries } = useSpecificSeries(media?.seriesId);
  return (
    <Flex
      direction="row"
      width="full"
      height="full"
      data-testid="display-Media-full"
    >
      <Covers
        data={media?.covers}
        size="50px"
        marginY="auto"
        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}
          color={MediaActive?.id === media.id ? 'green.700' : undefined}
        >
          {media.episode && `[${media.episode}]`} {media.name} 
        </Text>
        {/* {dataSeason && (
          <Text
            as="span"
            alignContent="left"
            fontSize="15px"
            fontWeight="bold"
            userSelect="none"
            marginX="auto"
            overflow="hidden"
            //noOfLines={1}
            marginY="auto"
            color={MediaActive?.id === media.id ? 'green.700' : undefined}
          >
            <Text as="span" fontWeight="normal">
              Season:
            </Text>{' '}
            {dataSeason.name}
          </Text>
        )} */}
        {/* {dataSeries && (
          <Text
            as="span"
            alignContent="left"
            fontSize="15px"
            fontWeight="bold"
            userSelect="none"
            marginRight="auto"
            overflow="hidden"
            //noOfLines={1}
            marginY="auto"
            color={MediaActive?.id === media.id ? 'green.700' : undefined}
          >
            <Text as="span" fontWeight="normal">
              Series(s):
            </Text>{' '}
            {dataSeries && dataSeries.name}
          </Text>
        )} */}
        {/* {dataType && (
          <Text
            as="span"
            alignContent="left"
            fontSize="15px"
            fontWeight="bold"
            userSelect="none"
            marginRight="auto"
            overflow="hidden"
            //noOfLines={1}
            marginY="auto"
            color={MediaActive?.id === media.id ? 'green.700' : undefined}
          >
            <Text as="span" fontWeight="normal">
              Type:
            </Text>{' '}
            {dataType.name}
          </Text>
        )} */}
      </Flex>
      <ContextMenu
        elements={contextMenu}
        data-testid="display-Media-full_context-menu"
      />
    </Flex>
  );
};
