import React, { useEffect } from "react";
import { useSelector, connect } from "react-redux";
import Carousel from "react-elastic-carousel";
import Book from "./Book/index";
import { book } from "../../../redux/actions";
import "./index.scss";

function Books({list, number}: any) {
  const slideNumberHandler = () => {
    if (window.innerWidth >= 1440) {
      return 5;
    } else if (window.innerWidth >= 1008 && window.innerWidth < 1440) {
      return 5;
    } else if (window.innerWidth > 640 && window.innerWidth < 1008) {
      return 4;
    } else {
      return 2;
    }
  };


  return (
    <section
      className="home-books d-flex flex-column"
    >
      {window.innerWidth > 1007 ? (
        <Carousel
          itemsToShow={slideNumberHandler()}
          isRTL={true}
          enableTilt={false}
          showArrows={true}
          pagination={false}
        >
          {list?.map((item: Object, i: Number) => (
            <Book data={item} key={i} />
          ))}
        </Carousel>
      ) : (
        <div className="home-books__list d-flex">
          {list?.map((item: Object, i: Number) => (
            <Book data={item} key={i} />
          ))}
        </div>
      )}
    </section>
  );
}

export default connect(
  ( state : any) => ({
  }),
  { }
)(Books);
