import React, { useState, useEffect } from "react";
import "./index.scss";
import Navbar from "../../components/Navbar";
import HomeSearchBox from "../../components/HomeSearchBox";
import Courses from "./Courses";
import GradeFilter from "../../components/GradeFilter";
import Books from "./Books";
import Blogs from "./Blogs";
import Footer from "./Footer";
import Header from "./Header";
import AppDownload from "./AppDownload";
import Vocal from "../../components/Vocal/Vocal";
import scroll from "../../util/scroll";
import { connect } from "react-redux";
import { book, publicApi } from "../../redux/actions";

function Home({
  courseList,
  getCourseList,
  grades,
  headerData,
  blogs,
  gradeFilterBooks,
  sortFilterCourse,
  selectedSort,
  sortFilter,
  getHeader,
}: any) {
  const [grade, setGrade] = useState(null);
  const [vocal, setVocal] = useState(false);
  const [inputValue, setInputValue] = useState("");

  useEffect(() => {
    if (inputValue) {
      sortFilter({ search: inputValue, sort: selectedSort });
      setVocal(false);
    }
  }, [inputValue]);
  useEffect(() => {
    getCourseList();
    scroll.goToTop();
    getHeader({device : 1});
  }, []);
  return (
    <>
      <div
        className="home main d-flex flex-column"
        style={{ filter: vocal ? "blur(8px)" : "" }}
      >
        <Navbar />
        <div className="desktop">
          <Header headerData={headerData} />
        </div>
        <HomeSearchBox
          setVocal={setVocal}
          inputValue={inputValue}
          setInputValue={setInputValue}
        />
        <Courses courses={sortFilterCourse ? sortFilterCourse : courseList} />
        <GradeFilter grades={grades} grade={grade} setGrade={setGrade} />
        <Books list={gradeFilterBooks ? gradeFilterBooks : courseList} />
        <Blogs />
        <AppDownload />
        <Footer />
      </div>
      {vocal ? (
        <Vocal setVocal={setVocal} setInputValue={setInputValue} />
      ) : null}
    </>
  );
}

export default connect(
  (state: any) => ({
    courseList: state.book.list,
    gradeFilterBooks: state.book.gradeFilterBooks,
    sortFilterCourse: state.book.sortFilterCourse,
    selectedSort: state.book.selectedSort,
    headerData: state.publicApi.header,
  }),
  {
    getCourseList: book.list,
    sortFilter: book.sortFilter,
    getHeader: publicApi.getHeader,
  }
)(Home);
Home.defaultProps = {
  grades: [
    {
      name: "اول",
      value: 1,
    },
    {
      name: "دوم",
      value: 2,
    },
    {
      name: "سوم",
      value: 3,
    },
    {
      name: "چهارم",
      value: 4,
    },
    {
      name: "پنجم",
      value: 5,
    },
    {
      name: "ششم",
      value: 6,
    },
    {
      name: "هفتم",
      value: 7,
    },
    {
      name: "هشتم",
      value: 8,
    },
    {
      name: "نهم",
      value: 9,
    },
    {
      name: "دهم",
      value: 10,
    },
    {
      name: "یازدهم",
      value: 11,
    },
    {
      name: "دوازدهم",
      value: 12,
    },
  ],
};