import React, { useState, useEffect, useCallback } from "react";
import { connect } from "react-redux";

import Sidebar from "./layouts/Desktop/Sidebar";
import Main from "./layouts/Desktop/Main";
import Header from "./layouts/Mobile/Header";
import MobileMain from "./layouts/Mobile/Main";
import { book, publicApi } from "../../redux/actions";

//assets

export const Products = ({
  isDark,
  isMobile,
  books,
  grades,
  setHeaderOptions,
  headerOptions,
  desktopContentTransform,
}) => {
  useEffect(() => {
    setHeaderOptions(headerOptions);
  }, []);

  return (
    <>
      {/* Portrait  */}
      <div
        className={`w-full flex flex-col bg-transparent relative  ${
          desktopContentTransform ? "lg:top-24 z-10" : ""
        }`}
      >
        {isMobile ? (
          <div className="h-screen w-full overflow-hidden">
            <Header />
            <MobileMain books={books} grades={grades} />
          </div>
        ) : (
          <div
            className={`w-full flex gap-10 px-5 overflow-y-hidden mt-3 justify-center lg:pt-24 lg:mt-0`}
          >
            <div className="w-11/12 flex gap-5 justify-end">
              <Sidebar />
              <Main books={books} grades={grades} />
            </div>
          </div>
        )}
      </div>
    </>
  );
};

const mapStateToProps = (state) => ({
  isDark: state.publicApi.isDark,
  isMobile: state.publicApi.isMobile,
  books: state.book.list,
  grades: state.publicApi.grades,
  filterOptions: state.book.filterOptions,
  desktopContentTransform: state.publicApi.desktopContentTransform,
});

const mapDispatchToProps = {
  gradeFilter: book.gradeFilter,
  setHeaderOptions: publicApi.setHeaderOptions,
  setFilterOptions: book.setFilterOptions,
};

export default connect(mapStateToProps, mapDispatchToProps)(Products);