import { Card, CardHeader, Heading, Divider, CardBody, CardFooter, GridItem, SimpleGrid, Text, Button, Flex, Icon } from '@chakra-ui/react';

import React, { useContext } from 'react';

import { useTranslation } from 'react-i18next';

import { ipfsGateways } from '../scripts/ipfs';

import { Book, Row } from '../scripts/searcher';

import { filesize as formatFileSize } from 'filesize';
import { TbChevronUp } from 'react-icons/tb';
import ExternalLink from './ExternalLink';
import Description from './Description';

interface IProps {
  row: Row
}

const BookDetailsCard: React.FC<IProps> = (props) => {

  // const downloadLinkFromIPFS = (gateway: string, book: Book) => {
  //   return (
  //     `https://${gateway}/ipfs/${book.ipfs_cid}?filename=` +
  //     encodeURIComponent(`${book.title}_${book.author}.${book.extension}`)
  //   );
  // }

  const { t } = useTranslation();

  const { row } = props

  const {
    id,
    title,
    author,
    publisher,
    extension,
    filesize,
    language,
    year,
    pages,
    isbn,
    ipfs_cid
  } = row.original;

  return (
    <Card mt={{ base: 1, md: 2 }} mb={{ base: 2, md: 4 }} mx={{ base: 4, md: 8 }}>
      <CardHeader>
        <Heading as="h3" fontSize="xl">
          {title}
        </Heading>
      </CardHeader>
      <Divider />
      <CardBody>
        <SimpleGrid columns={{ sm: 1, md: 3, lg: 4 }} spacing={{ base: 2, md: 4 }}>
          <Description name={`${t('book.id') ?? 'zlib/libgen id'}: `}>{id}</Description>
          <GridItem colSpan={{ sm: 1, md: 2, lg: 3 }}>
            <Description name={`${t('book.ipfs_cid') ?? 'IPFS CID'}: `}>
              {ipfs_cid}
            </Description>
          </GridItem>
          <Description name={`${t('book.author') ?? 'Author'}: `}>{author}</Description>
          <Description name={`${t('book.publisher') ?? 'Publisher'}: `}>
            {publisher || t('book.unknown') || 'Unknown'}
          </Description>
          <Description name={`${t('book.extension') ?? 'Extension'}: `}>
            {extension}
          </Description>
          <Description name={`${t('book.filesize') ?? 'Filesize'}: `}>
            {formatFileSize(filesize) as string}
          </Description>
          <Description name={`${t('book.language') ?? 'Language'}: `}>
            <Text as="span" textTransform="capitalize">
              {language}
            </Text>
          </Description>
          <Description name={`${t('book.year') ?? 'Year'}: `}>
            {year || t('book.unknown') || 'Unknown'}
          </Description>
          <Description name={`${t('book.pages') ?? 'Pages'}: `}>
            {pages || t('book.unknown') || 'Unknown'}
          </Description>
          <Description name={`${t('book.isbn') ?? 'ISBN'}: `}>
            {isbn || t('book.unknown') || 'Unknown'}
          </Description>
        </SimpleGrid>
      </CardBody>
      <CardFooter flexDirection="column">
        
        {/* <SimpleGrid columns={{ sm: 2, md: 3, lg: 4, xl: 5 }} spacing={{ base: 2, md: 4 }}>
          {ipfsGateways.map((gateway) => (
            <Button
              as={ExternalLink}
              href={downloadLinkFromIPFS(gateway, row.original)}
              key={gateway}
              variant="outline"
            >
              {gateway}
            </Button>
          ))}

        </SimpleGrid> */}

        <Flex><Text fontWeight={'bold'}>{t('disclaimer.nolink_warning')}</Text></Flex>

        <Flex justify="flex-end">
          <Button
            variant="unstyled"
            onClick={() => row.toggleExpanded(false)}
            color="gray.500"
            mt={2}
            mb={-2}
          >
            {t('table.collapse')}
            <Icon as={TbChevronUp} boxSize={4} position="relative" top={0.5} left={1} />
          </Button>
        </Flex>
      </CardFooter>
    </Card>
  );
};

export default BookDetailsCard;