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

import { Gender } from '@/back-api';
import { Covers } from '@/components/Cover';
import { useCountTracksOfAGender } from '@/service/Track';

export type DisplayGenderProps = {
  dataGender?: Gender;
};
export const DisplayGender = ({ dataGender }: DisplayGenderProps) => {
  const { countTracksOnAGender } = useCountTracksOfAGender(dataGender?.id);
  if (!dataGender) {
    return (
      <Flex direction="row" width="full" height="full">
        Fail to retrieve Gender Data.
      </Flex>
    );
  }
  return (
    <Flex direction="row" width="full" height="full">
      <Covers
        data={dataGender?.covers}
        size="100"
        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]}
        >
          {dataGender?.name}
        </Text>
        <Text
          as="span"
          alignContent="left"
          fontSize="15px"
          userSelect="none"
          marginRight="auto"
          overflow="hidden"
          //TODO: noOfLines={1}
        >
          {countTracksOnAGender} track{countTracksOnAGender >= 1 && 's'}
        </Text>
      </Flex>
    </Flex>
  );
};