import { Card, Flex, Box, Text, Tag } from '@chakra-ui/react';

import React, { useState } from 'react';
import { colorSchemes } from '../constants/color';

import { Book } from '../scripts/searcher';
import BookDetailsCard from './BooksDetailsCard';

import { filesize as formatFileSize } from 'filesize';

interface IProps {
    book: Book
}

const DesktopDataListElement: React.FC<IProps> = (props) => {
    const { book } = props

    const languageColorScheme = colorSchemes[book.language.length % colorSchemes.length];
    const extensionColorScheme = colorSchemes[book.extension.charCodeAt(0) % colorSchemes.length];

    const [isOpen, setIsOpen] = useState<boolean>(false)

    return (
        <>
            <div onClick={() => { setIsOpen(true) }}>

                <Card cursor={'pointer'} backgroundColor={'transparent'} mt={{ base: 0, md: 2 }} mb={{ base: 2, md: 4 }} mx={{ base: 4, md: 8 }}>

                    <Flex justifyContent={'space-between'} alignItems={'center'}>
                        <Box flex={10} p='4'>
                            <Text marginBottom={1} fontSize="lg">
                                {book.title}
                            </Text>
                        </Box>
                        <Box flex={6} p='4'>
                            <Text marginBottom={1} color={'gray.600'} fontSize="xs">
                                {book.author}
                            </Text>
                        </Box>
                        <Box flex={4} p='4'>
                            <Text marginBottom={1} color={'gray.400'} fontSize="xs">
                                {book.publisher}
                            </Text>
                        </Box>
                        <Box flex={2} p='4'>
                            <Tag colorScheme={extensionColorScheme}>{book.extension}</Tag>
                        </Box>
                        <Box flex={3} p='4'>
                            <Text marginBottom={1} color={'gray.400'} fontSize="xs">
                                {formatFileSize(book.filesize) as string}
                            </Text>
                        </Box>
                        <Box flex={2} p='4'>
                            <Tag colorScheme={languageColorScheme} textTransform="capitalize">{book.language}</Tag>
                        </Box>
                        <Box flex={2} p='4'>
                            <Text marginBottom={1} color={'gray.400'} fontSize="xs">
                                {book.year}
                            </Text>
                        </Box>
                        <Box flex={2} p='4'>
                            <Text marginBottom={1} color={'gray.400'} fontSize="xs">
                                {book.pages}
                            </Text>
                        </Box>
                    </Flex>

                </Card>

            </div>

            {isOpen &&
                <BookDetailsCard row={{
                    original: book,
                    toggleExpanded: setIsOpen
                }} />}

        </>
    );
};

export default DesktopDataListElement;