import LayoutWithNav from "@/components/layout/LayoutWithNav";
import StandardContainer from "@/components/layout/StandardContainer";
import { fetchLifeStylePostDetail } from "apiCalls/apiEndpoints";
import { NextSeo } from "next-seo";
import Link from "next/link";
import React from "react";
import { lifeStyleInterface } from "types/PropInterfaces";
import ImageGallery from "react-image-gallery";
import video_placeholder from "assets/images/static/videohover.png";
import Image from "next/image";
import { Breadcrumb } from "antd";
import { useRouter } from "next/router";
import Carousel from "react-gallery-carousel";
import "react-gallery-carousel/dist/index.css";

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

  const { lifestyle_post_details } = params;
  // console.log('lifestyle detail', lifestyle_post_details)

  const lifeStylePostDetail = await fetchLifeStylePostDetail(
    lifestyle_post_details
  );

  return {
    props: {
      lifestyleDetails: lifeStylePostDetail.data,
    },
  };
}

function LifeStylePostDetails({ lifestyleDetails }: lifeStyleInterface) {
  console.log(LifeStylePostDetails);

  const { lifestyle_detail } = useRouter().query;

  const [showVideo, setShowVideo] = React.useState(false),
    [playButton, showPlayButton] = React.useState(true),
    [galleryPlayButton, showGalleryPlayButton] = React.useState(true),
    [fullscreenButton, showFullscreenButton] = React.useState(true),
    [galleryFullscreenButton, showGalleryFullscreenButton] =
      React.useState(true);

  function _toggleShowVideo() {
    setShowVideo(!showVideo);
    // this.setState({
    //   showVideo: this.state.showVideo
    // });

    if (showVideo) {
      if (showPlayButton) {
        showGalleryPlayButton(false);
      }

      if (fullscreenButton) {
        showGalleryFullscreenButton(false);
      }
    }
  }

  function _renderVideo(item) {
    return (
      <div className="lifestyle">
        {showVideo ? (
          <div className="video-wrapper">
            <a className="close-video" onClick={() => _toggleShowVideo()}></a>
            <iframe
              width="560"
              height="315"
              src={item.embedUrl}
              frameBorder="0"
              allowFullScreen
            ></iframe>
          </div>
        ) : (
          <a onClick={() => _toggleShowVideo()}>
            <div className="play-button"></div>
            <img className="image-gallery-image" src={item.original} />
            {item.description && (
              <span
                className="image-gallery-description"
                style={{ right: "0", left: "initial" }}
              >
                {item.description}
              </span>
            )}
          </a>
        )}
      </div>
    );
  }
  return (
    <LayoutWithNav>
      <NextSeo
        title={`${lifestyleDetails.description} | Ashantiweb.com`}
        description={`${lifestyleDetails.description}`}
      />
      <StandardContainer>
        <div className="flex">
          <div className="w-full">
            <Breadcrumb>
              <Breadcrumb.Item>
                <Link href={"/"}>Ashantiweb</Link>
              </Breadcrumb.Item>
              <Breadcrumb.Item>
                <Link href={"/lifestyle"}>Lifestyle</Link>
              </Breadcrumb.Item>
              <Breadcrumb.Item>
                <Link href={`/lifestyle/${lifestyle_detail}`}>
                  {lifestyle_detail}
                </Link>
              </Breadcrumb.Item>
            </Breadcrumb>
            <div className="mt-4"></div>
            <h4 className="text-2xl font-bold">{lifestyleDetails.name}</h4>
            <p className=" font-normal text-gray-500 mt-2">
              {lifestyleDetails.date} | by{" "}
              <Link
                href={"/user/" + lifestyleDetails?.author?.username}
                passHref
              >
                <a className="text-blue-600 hover:text-blue-300">
                  {lifestyleDetails.author.name}
                </a>
              </Link>
            </p>

            {lifestyleDetails.picture && (
              <div className="h-[290px] md:h-[420px] max-h-xl w-[100%] max-w-2xl relative mt-4">
                <Image
                  layout="fill"
                  src={lifestyleDetails.picture}
                  alt="lifestyle post image"
                  objectFit="contain"
                  objectPosition="left"
                />
              </div>
            )}
            <p className="text-gray-600 mt-6 max-w-2xl leading-relaxed">
              {lifestyleDetails.description}
            </p>

            {lifestyleDetails?.videos?.length > 1 &&
              lifestyleDetails?.videos.map((video, index) => (
                <div className="mt-6" key={index}>
                  <video src={video.embed_url} controls></video>
                </div>
              ))}

            {lifestyleDetails?.media?.length ? (
              <div className="mt-12">
                <Carousel
                  objectFit="contain"
                  objectFitMax="contain"
                  images={lifestyleDetails?.media?.map((media) => ({
                    src: media.original_image,
                  }))}
                  style={{ height: 500, width: '100%', maxWidth: 800 }}
                />
              </div>
            ) : null}
            {/* {lifestyleDetails?.media?.length > 0 ? (
              <ImageGallery
                items={lifestyleDetails?.media?.map((lm) => {
                  const returnable = {
                    original: lifestyleDetails?.original_image,
                    thumbnail: lifestyleDetails?.embed_url
                      ? video_placeholder
                      : lifestyleDetails?.placeholder_image ??
                        lifestyleDetails?.original_image,
                    embedUrl: lifestyleDetails?.embed_url,
                    description: lifestyleDetails?.caption,
                  };

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

                  return returnable;
                })}
              />
            ) : null} */}
          </div>

          {/* <div>
            <h5>Explore Other {lifestyle_detail} of Ashanti</h5>
          </div> */}
          {/*  */}
        </div>
      </StandardContainer>
    </LayoutWithNav>
  );
}

export default LifeStylePostDetails;