import { Card, CardHeader, Tag, Text } from '@chakra-ui/react';
import React, { useState } from 'react';
import { colorSchemes } from '../constants/color';

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

interface IProps {
  book: Book
}

const MobileDataListElement: 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 backgroundColor={'transparent'} mt={{ base: 0, md: 2 }} mb={{ base: 2, md: 4 }} mx={{ base: 4, md: 8 }}>
          <CardHeader>
            <Text marginBottom={1} fontSize="lg">
              {book.title}
            </Text>
            <Text marginBottom={1} color={'gray.400'} fontSize="xs">
              {book.author}
            </Text>
            <div>
              <Tag colorScheme={languageColorScheme} textTransform="capitalize">{book.language}</Tag>
              {" "}
              <Tag colorScheme={extensionColorScheme}>{book.extension}</Tag>
            </div>
          </CardHeader>
        </Card>

      </div>

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

    </>
  );
};

export default MobileDataListElement;