import React, { useState, useEffect } from "react";
import Carousell from "react-elastic-carousel";
import { Carousel } from "3d-react-carousal";
import Blog from "./Blog/index";
import { connect, useSelector } from "react-redux";
import { blog } from "../../../redux/actions";


function Blogs(props: any) {
  const slideNumberHandler = () => {
    if (window.innerWidth >= 1440) {
      return 3;
    } else if (window.innerWidth >= 1008 && window.innerWidth < 1440) {
      return 3;
    } else if (window.innerWidth > 640 && window.innerWidth < 1008) {
      return 2;
    } else {
      return 1;
    }
  };
  const list = useSelector((state: any) => state.blog.list);
  useEffect(() => {
    props.getList();
  }, []);
  return (
    <section className="home-blogs d-flex flex-column">
      <header className="d-flex flex-column">
        <h1>پیشنهادهای داغ برای شما</h1>
      </header>
      {window.innerWidth > 1007 ? (
        <Carousell
          itemsToShow={slideNumberHandler()}
          isRTL={true}
          enableTilt={false}
          showArrows={false}
          pagination={false}
        >
          {list.map((item: Object, i: Number) => (
            <Blog data={item} key={i} />
          ))}
        </Carousell>
      ) : (
        <Carousel
          autoplay={false}
          arrows={false}
          slides={list?.map((item: Object, i: Number) => (
            <Blog data={item} key={i} />
          ))}
        />
      )}
    </section>
  );
}

export default connect(
  ({ blog }: any) => ({
    blog,
  }),
  { getList: blog.list }
)(Blogs);
