/* eslint-disable indent */
import React from "react";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import { fetchMultipleAds } from "@lib/redux/actions/ads-actions";
import { fetchClassify } from "@lib/redux/actions/classifieds-actions";
import { GridAdComponent, ListAdComponent } from "@components/ad-components";
import { GuardSpinner } from "react-spinners-kit";
import SortBar from "@components/sort-menu";
import Paginator, { paginatorEffects } from "@components/paginator-alt";
import Helmet from "@lib/helmet";
import EHA from "@components/eha";
import { Affix } from "antd";
import Foot from "@components/foot";

const Ads = ({
    ads,
    fetchMultipleAds,
    fetchClassify,
    status,
    match,
    single_clasified,
  }: {
    [propName: string]: any;
  }) => {
    const scrollToComponent = React.createRef();

    React.useEffect(() => {
      const queryParams = {
        include: "getClassified,district",
      };
      if (match.params.slug == "ads") {
        fetchMultipleAds(null, { queryParams });
      } else {
        fetchMultipleAds(null, {
          queryParams: { ...queryParams, classified_slug: match.params.slug },
        });
        fetchClassify(
          { slug: match.params.slug },
          {
            queryParams: {
              include: "subclassifieds.".repeat(8).slice(0, -1),
            },
          }
        );
      }
    }, [match.params.slug, ...paginatorEffects()]);

    // <section className="page-banner" style={{ height: '100px' }}></section>

    return (
      <>
        <Helmet pageTitle={process.env.APP_NAME + " | Ads"} pageUrl="/ads" />

        {status?.ads?.fetching ? (
          <section
            className="ads-grid-page pt-100 pb-70"
            style={{ backgroundColor: "#EEF2F4", minHeight: "100vh" }}
          >
            <div className="" style={{ paddingRight: "4%", paddingLeft: "4%" }}>
              <div
                className="d-flex justify-content-center align-items-center"
                style={{ width: "100%", minHeight: "200px" }}
              >
                <GuardSpinner />
              </div>
            </div>
          </section>
        ) : (
          <>
            <section
              className="ads-grid-page pt-100 pb-70"
              style={{ backgroundColor: "#EEF2F4", minHeight: "100vh" }}
            >
              <div
                className=""
                style={{ paddingRight: "4%", paddingLeft: "4%" }}
              >
                <div className="row">
                  <div className="col-lg-3">
                    <SortBar match={match} />
                    <div className="mt-50 d-none d-md-block">
                      <EHA
                        localKey="bmasb"
                        style={{ display: "block" }}
                        format="link"
                        client="ca-pub-1110030198957831"
                        slot="7850473230"
                        fullWidthResponsive="true"
                        width="100%"
                        height="350px"
                      />
                    </div>
                  </div>
                  <div className="col-lg-7">
                    <EHA
                      localKey="bgs"
                      style={{ display: "block" }}
                      format="fluid"
                      layoutKey="-fb+5w+4e-db+86"
                      client="ca-pub-1110030198957831"
                      slot="6927176325"
                      width="100%"
                      height="240px"
                    />
                    <div className="tab-content mt-20" id="myTabContent">
                      <div
                        className="tab-pane fade show active mb-20"
                        id="grid"
                        role="tabpanel"
                        aria-labelledby="grid-tab"
                      >
                        {single_clasified?.display_mode == "list" ? (
                          <ListAdComponent ads={ads?.data} />
                        ) : null}
                        {single_clasified?.display_mode == "grid" ? (
                          <GridAdComponent ads={ads?.data} grids={3} />
                        ) : null}
                        {!single_clasified?.display_mode ? (
                          <GridAdComponent ads={ads?.data} grids={3} />
                        ) : null}
                      </div>
                      <div className="d-flex justify-content-center">
                        <Paginator
                          entity={ads}
                          scrollToComponent={scrollToComponent}
                        />
                      </div>
                      <div className="mt-40">
                        <EHA
                          localKey="bsctp"
                          style={{ display: "block" }}
                          format="fluid"
                          layoutKey="-fb+5w+4e-db+86"
                          client="ca-pub-1110030198957831"
                          slot="6927176325"
                          width="100%"
                          height="240px"
                        />
                      </div>
                    </div>
                  </div>
                  <div className="col-lg-2 d-none d-lg-block">
                    <Affix offsetTop={70}>
                      <EHA
                        localKey="bmasbpolu"
                        style={{ display: "block" }}
                        format="link"
                        client="ca-pub-1110030198957831"
                        slot="7850473230"
                        fullWidthResponsive="true"
                        width="100%"
                        height="550px"
                      />
                    </Affix>
                  </div>
                </div>
              </div>
            </section>
            <Foot />
          </>
        )}
      </>
    );
  },
  mapStateToProps = (state) => state,
  mapDispatchToProps = (dispatch) =>
    bindActionCreators(
      {
        fetchMultipleAds,
        fetchClassify,
      },
      dispatch
    );

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

// <div className="col-lg-10">
// 	<div className="row">
// 		<div className="col-lg-3 col-sm-6">
// 			<ContentLoader viewBox="0 0 380 300">
// 				<rect x="0" y="30" rx="10" ry="10" width="370" height="250" />
// 			</ContentLoader>
// 			<List />
// 		</div>
// 		<div className="col-lg-4 col-sm-6">
// 			<ContentLoader viewBox="0 0 380 300">
// 				<rect x="0" y="30" rx="10" ry="10" width="370" height="250" />
// 			</ContentLoader>
// 			<List />
// 		</div>
// 		<div className="col-lg-4 col-sm-6">
// 			<ContentLoader viewBox="0 0 380 300">
// 				<rect x="0" y="30" rx="10" ry="10" width="370" height="250" />
// 			</ContentLoader>
// 			<List />
// 		</div>
// 		<div className="col-lg-4 col-sm-6">
// 			<ContentLoader viewBox="0 0 380 300">
// 				<rect x="0" y="30" rx="10" ry="10" width="370" height="250" />
// 			</ContentLoader>
// 			<List />
// 		</div>
// 	</div>
// </div>