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

import olum7 from "../../assets/images/olum7.jpg";
import olum8 from "../../assets/images/olum8.jpg";
import olum9 from "../../assets/images/olum9.jpg";
import header from "../../assets/images/header.png";
import blog1 from "../../assets/images/blog1.png";
import blog2 from "../../assets/images/blog2.png";
import blog3 from "../../assets/images/blog3.png";

function Home({
  courseList,
  getCourseList,
  grades,
  headerData,
  blogs,
  gradeFilterBooks,
  sortFilterCourse,
  selectedSort,
  sortFilter
}: 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();
  }, []);
  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 blogs={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,
  }),
  { getCourseList: book.list, sortFilter: book.sortFilter }
)(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,
    },
  ],
  headerData: [
    {
      id: 0,
      name: "آیا هیجان زندگی همچنان باقی است؟",
      subTitle: "سوالاتی که پاسخی برای آنها نیست!",
      text: "آیا ذهن نویسنده به این سمت رفته که شما این متن را بخوانید؟ نویسنده درست حدس زده شما در حال خواندن هستید. لطفا خواندن را تمام کنید ",
      author: "جورج جونیور",
      imageUrl: header,
    },
    {
      id: 1,
      name: "آیا هیجان زندگی همچنان باقی است؟",
      subTitle: "سوالاتی که پاسخی برای آنها نیست!",
      text: "آیا ذهن نویسنده به این سمت رفته که شما این متن را بخوانید؟ نویسنده درست حدس زده شما در حال خواندن هستید. لطفا خواندن را تمام کنید ",
      author: "جورج جونیور",
      imageUrl: header,
    },
    {
      id: 2,
      name: "آیا هیجان زندگی همچنان باقی است؟",
      subTitle: "سوالاتی که پاسخی برای آنها نیست!",
      text: "آیا ذهن نویسنده به این سمت رفته که شما این متن را بخوانید؟ نویسنده درست حدس زده شما در حال خواندن هستید. لطفا خواندن را تمام کنید ",
      author: "جورج جونیور",
      imageUrl: header,
    },
  ],
  blogs: [
    {
      id: 0,
      name: "فیزیک کوانتوم و موارد مشابه",
      text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.",
      imageUrl: blog1,
      tags: ["دوره جدید", "تخفیف‌های هفتگی", "پایه هفتم"],
    },
    {
      id: 1,
      name: "فیزیک کوانتوم و موارد مشابه",
      text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.",
      imageUrl: blog2,
      tags: ["دوره جدید", "تخفیف‌های هفتگی", "پایه هفتم"],
    },
    {
      id: 2,
      name: "فیزیک کوانتوم و موارد مشابه",
      text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.",
      imageUrl: blog3,
      tags: ["دوره جدید", "تخفیف‌های هفتگی", "پایه هفتم"],
    },
    {
      id: 3,
      name: "فیزیک کوانتوم و موارد مشابه",
      text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.",
      imageUrl: blog1,
      tags: ["دوره جدید", "تخفیف‌های هفتگی", "پایه هفتم"],
    },
  ],
};
