import React from "react";
import { Typography, Row, Col, Divider } from "antd";
import { Link } from "react-router-dom";
import LazyLoad from "./lazy-load";
import EHA from "./eha";

interface AdsComponentInterface {
  ads: Record<string, any>[];
  limit?: number;
  mini?: boolean;
  showExternalAds?: boolean;
  grids?: number;
}

export const GridAdComponent = ({
  ads,
  limit,
  mini,
  showExternalAds,
  grids = 4,
}: AdsComponentInterface) => {
  React.useEffect(() => {
    if (showExternalAds) {
      for (let i = 0; i < Math.floor(Math.random() * Math.floor(5)); i++) {
        ads?.splice(
          Math.floor(Math.random() * Math.floor(ads?.length)),
          0,
          <EHA
            localKey={"in-ad-" + i}
            style={{ display: "block" }}
            format="auto"
            client="ca-pub-1110030198957831"
            slot="6238186276"
            fullWidthResponsive="true"
            width="100%"
            height="100%"
          />
        );
      }
    }
  }, [ads]);

  return (
    <Row gutter={[16, 16]}>
      {ads?.length ? (
        <>
          {limit ? (
            <>
              {Array.from(Array(limit), (e, i) => (
                <Col
                  xs={{ span: 24 / 2 }}
                  sm={{ span: 24 / 2 }}
                  lg={{ span: 24 / grids }}
                  key={ads[i]?.id}
                >
                  <Link
                    to={"/ad/" + ads[i]?.slug}
                    className="single-ads-product mt-15"
                    style={{ overflow: "hidden", position: "relative" }}
                  >
                    <div
                      className="product-image d-block"
                      style={{ minHeight: "150px", maxHeight: "230px" }}
                    >
                      <LazyLoad.Image
                        style={{ width: "100%" }}
                        src={ads[i]?.picture}
                        alt={ads[i]?.name}
                      />
                    </div>
                    <div
                      className="product-content"
                      style={{ paddingBottom: "0px !important" }}
                    >
                      {/* <h6 className="sub-title">{ads[i]?.classified?.name}</h6> */}
                      <Typography.Title
                        level={4}
                        ellipsis={{ rows: 2, expandable: false }}
                        style={{
                          fontSize: "15px",
                          marginBottom: "1px",
                          overflow: "hidden",
                        }}
                        className="main-title"
                      >
                        {ads[i]?.name}
                      </Typography.Title>
                      {!mini ? (
                        <>
                          {ads[i]?.price ? (
                            <div className="price-rating d-flex justify-content-between">
                              <p
                                className="price"
                                style={{ fontSize: "15px", color: "red" }}
                              >
                                {ads[i]?.currency + ads[i]?.price}
                              </p>
                              {/* <ul className="rating">
																	{ads[i]?.ratings?.map(rating =>
																		<li key={rating.id}><i className="far fa-star"></i></li>
																	)}
																	</ul>*/}
                            </div>
                          ) : null}
                          {/* <p style={{ fontSize: '13px' }} className="location"><i className="far fa-map-marker-alt"></i> {ads[i]?.district?.name}</p> */}
                          {/* <Link to={'/ad/' + ads[i]?.slug} className="btn btn-success btn-sm d-block">View</Link> */}
                        </>
                      ) : (
                        <div className="w-100">
                          {ads[i]?.price ? (
                            <p
                              className="location"
                              style={{ fontSize: "15px", color: "green" }}
                            >
                              <i className="far">GH₵</i> {ads[i]?.price}
                            </p>
                          ) : null}
                          {/* <p style={{ fontSize: '13px' }} className="location"><i className="far fa-map-marker-alt"></i> {ads[i]?.district?.name}</p> */}
                        </div>
                      )}
                    </div>
                  </Link>
                </Col>
              ))}
            </>
          ) : (
            <>
              {ads?.map((ad) => (
                <Col
                  xs={{ span: 24 / 2 }}
                  sm={{ span: 24 / 2 }}
                  lg={{ span: 24 / grids }}
                  key={ad?.id}
                >
                  {ad?.id ? (
                    <Link
                      className="single-ads-product mt-15"
                      style={{ overflow: "hidden", position: "relative" }}
                      to={"/ad/" + ad?.slug}
                    >
                      <div
                        className="product-image d-block"
                        style={{ minHeight: "150px", maxHeight: "230px" }}
                      >
                        <LazyLoad.Image
                          style={{ width: "100%" }}
                          src={ad?.picture}
                          alt={ad?.name}
                        />
                      </div>
                      <div
                        className="product-content"
                        style={{ paddingBottom: "0px !important" }}
                      >
                        {/* <h6 className="sub-title">{ad?.classified?.name}</h6> */}
                        <Typography.Title
                          level={4}
                          ellipsis={{ rows: 2, expandable: false }}
                          style={{
                            fontSize: "13px",
                            marginBottom: "1px",
                            overflow: "hidden",
                          }}
                          className="main-title"
                        >
                          {ad?.name}
                        </Typography.Title>
                        {!mini ? (
                          <>
                            {ad?.price ? (
                              <div className="price-rating d-flex justify-content-between">
                                <p
                                  className="price"
                                  style={{
                                    margin: "0 0 2px 0",
                                    color: "red",
                                    fontSize: "13px",
                                  }}
                                >
                                  {ad?.currency + ad?.price}
                                </p>
                                {/* <ul className="rating">
																		{ad?.ratings?.map(rating =>
																			<li key={rating?.id}><i className="far fa-star"></i></li>
																		)}
																		</ul> */}
                              </div>
                            ) : null}
                            {/* <p style={{ fontSize: '13px', margin: 0 }} className="location"><i className="far fa-map-marker-alt"></i> {ad?.district?.name}</p> */}
                          </>
                        ) : (
                          <div className="w-100">
                            {ad?.price ? (
                              <p
                                style={{
                                  margin: "0 0 2px 0",
                                  color: "green",
                                  fontSize: "13px",
                                }}
                                className="location"
                              >
                                <i className="far">GH₵</i> {ad?.price}
                              </p>
                            ) : null}
                            {/* <p style={{ fontSize: '13px', margin: 0 }} className="location"><i className="far fa-map-marker-alt"></i> {ad?.district?.name}</p> */}
                          </div>
                        )}
                      </div>
                    </Link>
                  ) : (
                    <div
                      style={{ height: "100%" }}
                      className="d-block single-ads-product mt-15"
                    >
                      {ad}
                    </div>
                  )}
                </Col>
              ))}
            </>
          )}
        </>
      ) : (
        <></>
      )}
    </Row>
  );
};

export const ListAdComponent = ({
  ads,
  limit,
  mini,
  showExternalAds,
}: AdsComponentInterface) => {
  return ads?.length ? (
    <div>
      {ads?.map((ad) => (
        <div className="ad-components" key={ad?.id}>
          <Link to={"/ad/" + ad?.slug} className="ad-hol">
            <div className="img-hol">
              <img src={ad?.picture} alt={ad?.name} />
            </div>

            <div className="ad-details-hol">
              <Typography.Title
                level={1}
                ellipsis={{ rows: 2, expandable: false }}
                className="ad-title"
              >
                {ad.name}
              </Typography.Title>
              <Typography.Paragraph
                ellipsis={{ rows: 2 }}
                style={{ fontSize: "13px", marginBottom: "2px" }}
                className="text-sm ad-detail"
              >
                {ad?.description}
              </Typography.Paragraph>
              {/* <p className='ad-detail text-sm'>
									<i className="far fa-map-marker mr-2"></i>
									{ad?.district?.name}
								</p> */}
              {ad?.price ? (
                <p className="ad-detail text-sm" style={{ color: "green" }}>
                  {ad?.currency} {ad?.price}
                </p>
              ) : null}
            </div>
          </Link>
        </div>
      ))}
      <Divider />
    </div>
  ) : null;
};

// @deprecated
export const ListAdComponentDiscarded = ({ ads }: Record<string, any>) => (
  <>
    <div className="row">
      {ads?.map((ad) => (
        <div key={ad?.id} className="col-xl-8 col-lg-10">
          <div className="single-ads-product ads-product-list d-flex flex-wrap mt-15">
            <div
              className="product-image d-block"
              style={{ minHeight: "150px" }}
            >
              <LazyLoad.Image
                style={{ width: "100%" }}
                src={ad?.picture}
                alt={ad?.name}
              />
            </div>
            <div className="product-content">
              {/* <h6 className="sub-title">{ad?.classified?.name}</h6> */}
              <h4 className="main-title" style={{ fontSize: "15px" }}>
                <a href={"/ad/" + ad?.slug}>{ad?.name}</a>
              </h4>
              {/* <p style={{ fontSize: '13px' }} className="location"><i className="far fa-map-marker-alt"></i> {ad?.district?.name}</p> */}
              {ad?.price ? (
                <div className="price-rating d-flex justify-content-between">
                  <p
                    className="price"
                    style={{ fontSize: "15px", color: "green" }}
                  >
                    {ad?.currency + ad?.price}
                  </p>
                  {/* 
												<ul className="rating">
												{ad?.ratings.map(rating =>
													<li key={rating?.id}><i className="far fa-star"></i></li>
												)}
												</ul> 
											*/}
                </div>
              ) : null}
              {/* <a href={'/ad/' + ad?.slug} className="btn btn-success btn-sm d-block">View</a> */}
            </div>
          </div>
        </div>
      ))}
    </div>
  </>
);