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

import { Type } from '@/back-api';
import { Covers } from '@/components/Cover';
import { useTypeCountVideo } from '@/service';

export type DisplayTypeProps = {
  dataType?: Type;
};
export const DisplayType = ({ dataType }: DisplayTypeProps) => {
  const { countVideoWithType } = useTypeCountVideo(dataType?.id);
  if (!dataType) {
    return (
      <Flex direction="row" width="full" height="full">
        Fail to retrieve Type Data.
      </Flex>
    );
  }
  return (
    <Flex direction="column" width="full" height="full">
      <Covers
        data={dataType?.covers}
        size="50"
        height="full"
        iconEmpty={<LuDisc3 />}
      />
      <Flex
        direction="column"
        width="150px"
        maxWidth="150px"
        height="full"
        paddingLeft="5px"
        overflowX="hidden"
      >
        <Text
          as="span"
          alignContent="left"
          fontSize="20px"
          fontWeight="bold"
          userSelect="none"
          marginRight="auto"
          overflow="hidden"
          //TODO: noOfLines={[1, 2]}
        >
          {dataType?.name}
        </Text>
        <Text
          as="span"
          alignContent="left"
          fontSize="15px"
          userSelect="none"
          marginRight="auto"
          overflow="hidden"
          //TODO: noOfLines={1}
        >
          {countVideoWithType} Media{countVideoWithType >= 1 && 's'}
        </Text>
      </Flex>
    </Flex>
  );
};
