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

import { Album } from '@/back-api';
import { Covers } from '@/components/Cover';
import { useCountTracksWithAlbumId } from '@/service/Track';
import { BASE_WRAP_ICON_SIZE } from '@/constants/genericSpacing';

export type DisplayAlbumProps = {
  dataAlbum?: Album;
};
export const DisplayAlbum = ({ dataAlbum }: DisplayAlbumProps) => {
  const { countTracksOfAnAlbum } = useCountTracksWithAlbumId(dataAlbum?.id);
  if (!dataAlbum) {
    return (
      <Flex direction="row" width="full" height="full">
        Fail to retrieve Album Data.
      </Flex>
    );
  }
  return (
    <Flex direction="row" width="full" height="full"
      data-testid="display-album_flex">
      <Covers
        data={dataAlbum?.covers}
        size={BASE_WRAP_ICON_SIZE}
        flex={1}
        iconEmpty={<LuDisc3 />}
      />
      <Flex
        direction="column"
        width="150px"
        //maxWidth="150px"
        height="full"
        paddingLeft="5px"
        overflowX="hidden"
        flex={1}
      >
        <Span
          textAlign="left"
          fontSize="20px"
          fontWeight="bold"
          userSelect="none"
          marginRight="auto"
          overflow="hidden"
        // noOfLines={[1, 2]}
        >
          {dataAlbum?.name}
        </Span>
        <Span
          textAlign="left"
          fontSize="15px"
          userSelect="none"
          marginRight="auto"
          overflow="hidden"
        // noOfLines={1}
        >
          {countTracksOfAnAlbum} track{countTracksOfAnAlbum >= 1 && 's'}
        </Span>
      </Flex>
    </Flex>
  );
};