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

import { Series } from '@/back-api';
import { Covers } from '@/components/Cover';
import { useSeriesCountVideo } from '@/service';

export type DisplaySeriesProps = {
  dataSeries?: Series;
};
export const DisplaySeries = ({ dataSeries }: DisplaySeriesProps) => {
  const { seriesCountVideo } = useSeriesCountVideo(dataSeries?.id);
  if (!dataSeries) {
    return (
      <Flex direction="row" width="full" height="full">
        Fail to retrieve Type Data.
      </Flex>
    );
  }
  return (
    <Flex direction="column" width="full" height="full">
      <Covers
        data={dataSeries?.covers}
        size="100"
        height="full"
        iconEmpty={<LuDisc3 />}
      />
      <Flex
        direction="column"
        width="full"
        height="full"
        paddingLeft="5px"
        overflowX="hidden"
        alignContent="center"
      >
        <Text
          as="span"
          alignContent="left"
          fontSize="20px"
          fontWeight="bold"
          userSelect="none"
          marginX="auto"
          overflow="hidden"
          //TODO: noOfLines={[1, 2]}
        >
          {dataSeries?.name}
        </Text>
        <Text
          as="span"
          alignContent="left"
          fontSize="15px"
          userSelect="none"
          marginX="auto"
          overflow="hidden"
          //TODO: noOfLines={1}
        >
          {seriesCountVideo} Media{seriesCountVideo >= 1 && 's'}
        </Text>
      </Flex>
    </Flex>
  );
};
