import { Box, 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';
import IpfsDownloadButton from './IpfsDownloadButton';

interface IProps {
  row: Row
}

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

  const { t } = useTranslation();

  const { row } = props

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

  const searchOnAnnasArchive = () => {
    return (`https://annas-archive.org/search?q=` + encodeURIComponent(`${title} ${author}`));
  }

  return (
    <Card mt={{ base: 1, md: 2 }} mb={{ base: 2, md: 4 }} mx={{ base: 4, md: 8 }}>
      <CardHeader>
        <Flex
          align="center"
          flexWrap={{ base: 'wrap', lg: 'nowrap' }}
          justify="space-between"
          gap={{ base: '4', lg: '2' }}
        >
          <Heading as="h3" fontSize={['xl', '2xl', '2xl']} whiteSpace="break-spaces" minW="0">
            {title}
          </Heading>
          <Flex gap="2">
            <Button
              as={ExternalLink}
              minWidth="unset"
              href={searchOnAnnasArchive()}
            >
              {t('input.anna_archive')}
            </Button>
          </Flex>
        </Flex>
      </CardHeader>
      <Divider />
      <CardBody>
        <SimpleGrid columns={{ sm: 1, md: 3, lg: 4 }} spacing={{ base: 2, md: 4 }}>
          <Description name={`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 }}>

          <IpfsDownloadButton book={row.original as Book} onlyIcon={false}></IpfsDownloadButton>

          {/* {ipfsGateways.map((gateway) => (
            <Button
              as={ExternalLink}
              href={downloadLinkFromIPFS(gateway, row.original)}
              key={gateway}
              variant="outline"
            >
              {gateway}
            </Button>
          ))} */}

        </SimpleGrid>

        <Flex><Text mt={2} mb={-2} fontSize={'2xs'} fontStyle={'italic'} fontWeight={'light'}>{t('disclaimer.broken_link')}</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;