import React, { Component } from "react";
import { connect } from "react-redux";
import { publicApi } from "~/Redux/actions";

import Navbar from "./Navbar";
import HomeHeader from "./HomeHeader/index";
import HomeStatic from "./HomeStatic/index";
import HomeScroll from "./HomeScroll/index";
import Footer from "./Footer/index";
import HomeSlider from "./HomeSlider/index";
import HomeSearch from "./HomeSearch/index";
import Membership from "./Membership/index";
import SingleBlog from "./SingleBlog/index";
import Loader from "~/components/Loader/index";

// import pic1 from "~/assets/images/pic1.png";
// import pic from "~/assets/images/pic.png";
// import online from "~/assets/icons/online-education.png";
// import chemistry from "~/assets/icons/chemistry.png";
// import calculator from "~/assets/icons/calculator.png";
// import homework from "~/assets/icons/homework.png";
// import sciense_6 from "~/assets/images/sciense-6.png";
// import chemistry_10 from "~/assets/images/chemistry-10.png";
// import sciense_8 from "~/assets/images/sciense-8.png";
// import sciense_9 from "~/assets/images/sciense-9.png";
// import zist_10 from "~/assets/images/zist-10.png";
// import blog1 from "~/assets/images/blog1.png";
// import blog2 from "~/assets/images/blog2.png";
// import blog3 from "~/assets/images/blog3.png";
// import ar from "~/assets/icons/qr.svg";
// import qr from "~/assets/icons/qr.svg";
// import myBook from "~/assets/images/myBook.png";
// import homeBlog from "~/assets/images/homeBlog.png";
// import bookActivation from "~/assets/images/bookActivating.png";
// import home_chat from "~/assets/icons/home_chat.png";
// import home_ar from "~/assets/icons/home_ar(2).png";

import "./index.scss";

class Home extends Component {
  componentDidMount() {
    const mobile = window.innerWidth < 1000;
    window.scrollTo(0, 0);
    console.log("xx");
    // if (this.props.homeData.length == 0) {
    if (mobile && this.props.userStatus) {
      this.props.getHomeData({ device: 2 });
    } else {
      this.props.getHomeData({ device: 1, mobile: mobile ? 1 : 0 });
    }
    return null;
    // }
  }
  //componentDidupdate = this.componentDidMount();
  render() {
    const { homeData, loading } = this.props;
    if (!loading && this.props.homeData.length === 0)
      return this.componentDidMount();
    const mobile = window.innerWidth < 1000;
    if (loading && this.props.homeData.length === 0)
      return (
        <div
          className="d-flex justify-content-center align-items-center"
          style={{ height: "100vh", width: "100vw" }}
        >
          <Navbar page={"home"} />
          <Loader />
        </div>
      );
    console.log({ homeData });
    return (
      <>
        <>
          <div
            className={
              (this.props.status && mobile ? "mobile-home" : "home") +
              " d-flex flex-column"
            }
          >
            <Navbar page={"home"} />
            {homeData.map((item, i) => (
              <Identifier item={item} key={i} />
            ))}
          </div>
          {window.innerWidth > 1000 ? <Footer /> : null}
        </>
      </>
    );
  }
}

export default connect(
  (state) => ({
    homeData: state.publicApi.homeData,
    loading: state.publicApi.loading,
    userStatus: state.user.status,
  }),
  { getHomeData: publicApi.getHomeData }
)(Home);

const Identifier = (props) => {
  console.log({ item: props.item });
  return (
    <>
      {props.item.type === "header" ? (
        <HomeHeader
          height={props.item.height}
          title={props.item.title}
          data={props.item.data}
        />
      ) : null}
      {props.item.type === "static" ? (
        <HomeStatic
          height={props.item.height}
          title={props.item.title}
          data={props.item.data}
          designType={props.item.design}
        />
      ) : null}
      {props.item.type === "scroll" ? (
        props.item.data.length > 0 ? (
          <HomeScroll
            number={props.item.number}
            height={props.item.height}
            title={props.item.title}
            data={props.item.data}
            designType={props.item.design}
            moreText={props.item.moreText}
          />
        ) : null
      ) : null}
      {props.item.type === "slider" ? (
        props.item.data.length > 0 ? (
          <HomeSlider
            designType={props.item.design}
            number={props.item.number}
            height={props.item.height}
            title={props.item.title}
            data={props.item.data}
            link={props.item.link}
          />
        ) : null
      ) : null}
      {props.item.type === "search" ? (
        <HomeSearch height={props.item.height} data={props.item.data} />
      ) : null}
      {props.item.type === "membership" && window.innerWidth > 1000 ? (
        <Membership />
      ) : null}
      {props.item.type === "singleBlog" && window.innerWidth > 1000 ? (
        <SingleBlog
          height={props.item.height}
          data={props.item.data}
          direction={props.item.direction}
        />
      ) : null}
    </>
  );
};