import React, {useEffect} from "react";
import Carousel from "react-elastic-carousel";
import Course from "./Course/index";
import { Link } from "react-router-dom";
import ExpandMoreRoundedIcon from "@mui/icons-material/ExpandMoreRounded";
import {connect} from 'react-redux';
import "./index.scss";

function Courses({number, courses, selectedSort} : any) {
  const slideNumberHandler = () => {
    if (window.innerWidth >= 1440) {
      return 5;
    } else if (window.innerWidth >= 1008 && window.innerWidth < 1440) {
      return 4;
    } else if (window.innerWidth > 640 && window.innerWidth < 1008) {
      return 3;
    } else {
      return 2;
    }
  };
  return (
    <section className="home-courses d-flex flex-column">
      <header className="d-flex justify-content-between">
        <div className="d-flex flex-column">
          <h1>{selectedSort}</h1>
          <span>در این قسمت شاید یک متن جهت زیباسازی قرار بگیرد.</span>
        </div>
        <Link to="/">
          بیشتر
        </Link>
      </header>
      {window.innerWidth > 1007 ? (
        <Carousel
          itemsToShow={slideNumberHandler()}
          isRTL={true}
          enableTilt={false}
          showArrows={true}
          pagination={false}
        >
          {courses?.map((item: Object, i: Number) => (
            <Course data={item} key={i} />
          ))}
        </Carousel>
      ) : (
        <div className="home-courses__list d-flex">
          {courses?.map((item: Object, i: Number) => (
            <Course data={item} key={i} />
          ))}
        </div>
      )}

      <Link
        className="home-courses__more d-flex align-items-center"
        to="/courses"
      >
        مشاهده بیشتر{" "}
        <ExpandMoreRoundedIcon style={{ fontSize: 25, color: "#9CDF52" }} />
      </Link>
    </section>
  );
}

export default connect((state : any) => ({
  selectedSort : state.book.selectedSort,
}))(Courses)