import LayoutWithNav from "@/components/layout/LayoutWithNav";
import { Breadcrumb, Button, Col, Row, Typography } from "antd";
import Image from "next/image";
import React, { useEffect } from "react";
import classifiedHeader from "assets/images/page-header.png";
import classifiedsHeadIcon from "assets/images/lifestyle-head-icon.png";
import Link from "next/link";
import { fetchDistricts, specificLifestyle } from "apiCalls/apiEndpoints";
import { useRouter } from "next/router";
import { useDistricts } from "context/DistrictContext";
import ImageWithFallback from "@/components/layout/ImageWithFallback";
import { NextSeo } from "next-seo";
import { ShareAltOutlined } from "@ant-design/icons";
import ImageGallery from "react-image-gallery";

function LifestyleData({ lifestyleDetail, districts }: any) {
  //get the router param/pathname
  const router = useRouter();
  const { lifestyle_detail } = router.query;

  const { setDistricts, setCurrentDistrict } = useDistricts();

  console.log("lifestyle_detail", lifestyle_detail);

  const lifestyle = lifestyleDetail;

  setDistricts(districts);

  useEffect(() => {
    setCurrentDistrict(null);
  }, [setCurrentDistrict]);

  console.log("lifestyle detail", lifestyleDetail);

  return (
    <LayoutWithNav>
      <NextSeo
        title={`${lifestyle_detail} | Ashantiweb.com`}
        description={`${lifestyle_detail}`}
      />
      <section>
        <div
          style={{
            background: "#333",
            position: "relative",
            marginTop: "54px",
            height: "240px",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
          }}
        >
          <div className="w-full h-full absolute">
            <Image
              src={classifiedHeader}
              alt="classified header"
              layout="fill"
              style={{
                position: "absolute",
                top: 0,
                left: 0,
                width: "100%",
                height: "100%",
                zIndex: 1,
              }}
            />
          </div>
          <div className="container mx-auto lg:px-40 page-header-row">
            <div className="flex flex-col justify-center md:flex-row md:justify-between  items-center w-full pt-10">
              <div className="flex mt-3 md:">
                <Breadcrumb>
                  <Breadcrumb.Item className="">
                    <Link style={{ color: "#fff" }} href="/" passHref>
                      <a className="text-white">Home</a>
                    </Link>
                  </Breadcrumb.Item>
                  <Breadcrumb.Item className="">
                    <Link style={{ color: "#fff" }} href="/lifestyle" passHref>
                      <a className="text-white">Ashanti Lifestyle</a>
                    </Link>
                  </Breadcrumb.Item>
                  <Breadcrumb.Item className="">
                    <Link
                      style={{ color: "#fff" }}
                      href={`/lifestyle/${lifestyle_detail}`}
                      passHref
                    >
                      <a className="text-white">{lifestyle_detail}</a>
                    </Link>
                  </Breadcrumb.Item>
                </Breadcrumb>
              </div>
              {/* <div className='w-10 h-10 bg-gray-500'></div> */}
              <div className="mb-10 md:block h-[210px] w-[210px]">
                <Image
                  src={classifiedsHeadIcon}
                  alt="classified icon header"
                  className="page-header-img mb-2"
                  height={210}
                  width={210}
                  style={{ height: "210px", margin: "0 0 0 auto" }}
                />
              </div>
            </div>
          </div>
        </div>
        <section className="container mx-auto xl:px-10">
          <>
            {/* <div className="text-center mb-50 pt-20"> */}
            {lifestyleDetail.length > 0 ? (
              <>
                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 mt-11">
                  {lifestyleDetail.map((item: any) => (
                    <>
                      <Link href={`${lifestyle_detail}/${item.slug}`}>
                        <div className="w-full rounded-md shadow-md  cursor-pointer">
                          <div className="p-3">
                            <div className="h-[250px] sm:h-[230px] md:h-[210px] w-full overflow-hidden relative">
                              <Image
                                objectFit="cover"
                                src={item.picture}
                                alt={item.slug}
                                layout="fill"
                               
                              />
                            </div>

                            <p className="text-gray-600 text-sm mt-3">
                              {item.date}
                            </p>
                            <p className="text-gray-800 font-semibold text-xl">
                              {item?.name}
                            </p>
                            <p className="text-gray-600 text-base">
                              {item?.shortDescription}
                            </p>
                            {item?.author?.name && (
                              <span className="text-gray-900">
                                by{" "}
                                <Link href={"/user/" + item?.author?.username}>
                                  <a className="font-italic text-sm text-gray-900 hover:text-gray-600">
                                    {item?.author?.name}
                                  </a>
                                </Link>
                              </span>
                            )}

                            {/* <Button>Read more</Button> */}
                          </div>
                        </div>
                      </Link>
                    </>
                  ))}
                </div>

                {/* {lifestyleDetail.map((item: any) => (
                  <>
                    {" "}
                    <Typography.Title
                      level={2}
                      style={{ color: "#f5f5f5" }}
                      className="mb-20 text-center"
                    >
                      {lifestyleDetail?.name}
                    </Typography.Title>
                    <Row
                      style={{ color: "#f5f5f5" }}
                      gutter={20}
                      className="mb-20 text-center justify-content-center"
                    >
                      <Col>{lifestyleDetail?.date}</Col>
                      <Col>|</Col>
                      <Col>
                        by{" "}
                        <Link
                          href={"/user/" + lifestyleDetail?.author?.username}
                        >
                          <>{lifestyleDetail?.author?.name}</>
                        </Link>
                      </Col>
                    </Row>{" "}
                  
                  </>
                ))} */}
              </>
            ) : (
              <div className="text-center mt-10">
                <h4>No data found</h4>
              </div>
            )}
            {/* <Typography.Title
                level={2}
                style={{ color: "#f5f5f5" }}
                className="mb-20 text-center"
              >
                {lifestyle?.name}
              </Typography.Title>
              <Row
                style={{ color: "#f5f5f5" }}
                gutter={20}
                className="mb-20 text-center justify-content-center"
              >
                <Col>{lifestyle?.date}</Col>
                <Col>|</Col>
                <Col>
                  by{" "}
                  <Link
                    href={"/user/" + lifestyle?.author?.username}
                    target="_blank"
                  >
                    {lifestyle?.author?.name}
                  </Link>
                </Col>
              </Row> */}
            {/* <Share title={lifestyle?.name} text={lifestyle?.description}>
                <Button style={{ color: "#f5f5f5" }} type="ghost">
                  Share <ShareAltOutlined />
                </Button>
              </Share> */}
            {/* </div> */}

            {/* {lifestyle?.media?.length ? (
              <ImageGallery
                items={lifestyle?.media?.map((lm) => {
                  const returnable = {
                    original: lm?.original_image,
                    thumbnail: lm?.embed_url
                      ? video_placeholder
                      : lm?.placeholder_image ?? lm?.original_image,
                    embedUrl: lm?.embed_url,
                    description: lm?.caption,
                  };

                  if (lm?.embed_url)
                    returnable["_renderItem"] = _renderVideo(returnable);

                  return returnable;
                })}
              />
            ) : null} */}
          </>
        </section>
      </section>
    </LayoutWithNav>
  );
}

export async function getServerSideProps({ req, res, params }: any) {
  res.setHeader(
    "Cache-Control",
    "public, s-maxage=10, stale-while-revalidate=59"
  );

  const { lifestyle_detail } = params;

  const lifestyle = await specificLifestyle(lifestyle_detail);
  const districts = await fetchDistricts();

  console.log("lifestyle", lifestyle.data);

  return {
    props: {
      // lifestyle: fetchLifeStyles.data,
      // districts: districts.data
      lifestyleDetail: lifestyle.data,
      districts: districts.data,
    },
    // will be passed to the page component as props
  };
}

export default LifestyleData;