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

import { Season } from '@/back-api';
import { Covers } from '@/components/Cover';
import { BASE_WRAP_ICON_SIZE } from '@/constants/genericSpacing';
import { useSeasonCountVideo } from '@/service/Season';

export type DisplaySeasonProps = {
  dataSeason?: Season;
};
export const DisplaySeason = ({ dataSeason }: DisplaySeasonProps) => {
  const { seasonCountVideo } = useSeasonCountVideo(dataSeason?.id);
  if (!dataSeason) {
    return (
      <Flex direction="row" width="full" height="full">
        Fail to retrieve Season Data.
      </Flex>
    );
  }
  return (
    <Flex
      direction="row"
      width="full"
      height="full"
      data-testid="display-Season_flex"
    >
      <Covers
        data={dataSeason?.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]}
        >
          {dataSeason?.name}
        </Span>
        <Span
          textAlign="left"
          fontSize="15px"
          userSelect="none"
          marginRight="auto"
          overflow="hidden"
          // noOfLines={1}
        >
          {seasonCountVideo} Media{seasonCountVideo >= 1 && 's'}
        </Span>
      </Flex>
    </Flex>
  );
};
