import { NewsCard } from "components/home/NewsSection";
import LayoutThree from "components/layout/LayoutThree";
import Calendar from "components/shared/Calendar";
import { IGallery } from "data";
import { events, news } from "dummyData";
import { NextPageContext } from "next";
import Image from "next/image";
import { NextPageWithLayout } from "pages/_app";
import { ReactElement } from "react";
import { TiTick } from "react-icons/ti";
import Slider from "react-slick";

import "slick-carousel/slick/slick-theme.css";
import "slick-carousel/slick/slick.css";

interface IProps {
  newsItem: IGallery;
}

const SingleNewsPage: NextPageWithLayout<IProps> = ({ newsItem }) => {
  if (!newsItem) {
    return <div>Gallery Item not found</div>;
  }

  const settings = {
    dots: false,
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 3000,
    pauseOnHover: true,
    responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3,
          infinite: true,
          dots: false,
        },
      },
      {
        breakpoint: 768,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2,
          initialSlide: 2,
        },
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
        },
      },
    ],
  };

  return (
    <div className="">
      <section className="w-[80%] mx-auto ">
        <div className="container mx-auto px-4">
          <div className="lg:col-gap-12 xl:col-gap-16 mt-8 grid grid-cols-1 gap-12 lg:mt-12 lg:grid-cols-5 lg:gap-16 ">
            <div className="lg:col-span-4 lg:row-end-1 ">
              <h3 className="text-primary-dark text-4xl sm:text-5xl font-cmp pb-10 flex items-center gap-3">
                News Overview
                {/* <span className="relative h-8 sm:h-12 w-3 sm:w-4 flex items-center">
                  <Image src={"/logom4.png"} layout="fill" />
                </span> */}
              </h3>
              <div className="lg:flex lg:items-start relative">
                {/* {typeof newsItem.content === "string" && (
                  <div className="text-base sm:text-xl lg:text-2xl xl:text-3xl  text-light-dark">
                    {newsItem.content}
                  </div>
                )} */}
                {typeof newsItem.content === "object"
                  ? newsItem?.content?.list?.length && (
                      <div className="text-base sm:text-xl lg:text-2xl xl:text-3xl  text-light-dark">
                        <p>{newsItem?.content?.intro}</p>

                        <h3 className="text-primary-dark text-3xl sm:text-4xl font-cmp flex items-center gap-3 pt-4">
                          {newsItem?.content?.listTitle}
                          <span className="relative h-8 sm:h-12 w-3 sm:w-4 flex items-center">
                            <Image src={"/logom4.png"} layout="fill" />
                          </span>
                        </h3>

                        <ul>
                          {newsItem.content.list.map((item, index) => (
                            <li className="py-1" key={index.toString()}>
                              <div className="flex items-center space-x-3">
                                <span className="bg-secondary-accent text-primary-dark rounded">
                                  <TiTick size={30} />
                                </span>
                                <span className="text-base sm:text-2xl">
                                  {item}
                                </span>
                              </div>
                            </li>
                          ))}
                        </ul>
                        <p className="pt-4">{newsItem?.content?.outro}</p>

                        {newsItem?.form && (
                          <button className="rounded-lg bg-primary-dark w-fit p-3 mt-10">
                            <a
                              className="text-accent-dark text-xl font-semibold"
                              href={newsItem?.form}
                              download
                            >
                              Download Form
                            </a>
                          </button>
                        )}
                      </div>
                    )
                  : typeof newsItem.content === "string" && (
                      <div className="text-base sm:text-xl lg:text-2xl xl:text-3xl  text-light-dark">
                        {newsItem.content}
                      </div>
                    )}
                <div className="bg-primary-dark border border-primary-dark absolute top-0 right-0 h-full transform translate-x-4"></div>
              </div>
            </div>

            <div className="lg:col-span-2 lg:row-span-2 lg:row-end-2">
              <h3 className="mb-5 text-xl">
                Events
                <span className="border-b-2 border-b-primary-dark block mt-1 w-[20%]"></span>
              </h3>
              {events.map((event) => (
                <div className="flex gap-2 pb-4" key={event.id.toString()}>
                  <Calendar
                    day={event.date?.month}
                    year={event?.date?.year}
                    invert
                  />
                  <div className="flex flex-col justify-center gap-1">
                    <h4 className="text-light-dark text-xl font-semibold line-clamp-2">
                      {event.title}
                    </h4>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="mt-8  w-full min-h-[20vh] py-20">
          <h3 className="text-primary-dark text-4xl sm:text-5xl font-cmp pb-10 flex items-center gap-3">
            Other News
            <span className="relative h-8 sm:h-12 w-3 sm:w-4 flex items-center">
              <Image src={"/logom4.png"} layout="fill" />
            </span>
          </h3>
          <Slider {...settings} className="-mx-4">
            {news.map((newsItem) => (
              <NewsCard newsItem={newsItem} />
            ))}
          </Slider>
        </div>
      </section>
    </div>
  );
};

export default SingleNewsPage;

SingleNewsPage.getInitialProps = ({ query }: NextPageContext): IProps => {
  const { newsId } = query;
  const newsItem = news.find((n) => n.id === Number(newsId));

  return {
    newsItem: newsItem as IGallery,
  };
};

SingleNewsPage.getLayout = function getLayout(page: ReactElement) {
  const { props } = page;

  return (
    <LayoutThree image={props.newsItem.image} title={props.newsItem.title}>
      {page}
    </LayoutThree>
  );
};
