import { EventCard } from "components/home/EventsSection";
import LayoutThree from "components/layout/LayoutThree";
import { IEvent } from "data";
import { events } from "dummyData";
import { NextPageContext } from "next";
import { NextPageWithLayout } from "pages/_app";
import { ReactElement } from "react";
import { HiCalendar } from "react-icons/hi";

import Image from "next/image";
import { BsPeopleFill } from "react-icons/bs";
import { ImLocation2 } from "react-icons/im";
import Slider from "react-slick";
import "slick-carousel/slick/slick-theme.css";
import "slick-carousel/slick/slick.css";

interface IProps {
  event: IEvent;
}

const SingleEventPage: NextPageWithLayout<IProps> = ({ event }) => {
  if (!event) {
    return <div>News 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-2 lg:row-span-2 lg:row-end-2">
              <h3 className="mb-5 text-xl">
                Event details
                <span className="border-b-2 border-b-primary-dark block mt-1 w-[20%]"></span>
              </h3>

              {/* Where */}
              <div className="flex gap-2 pb-4">
                <div className="rounded-lg px-4 py-3 bg-primary-dark flex items-center justify-center text-white">
                  <ImLocation2 size={20} />
                </div>
                <div className="flex flex-col justify-center gap-1">
                  <h4 className="text-light-dark text-xl font-semibold line-clamp-2">
                    Where
                  </h4>
                  <h5 className="text-light-accent text-base font-semibold line-clamp-2">
                    {event.venue}
                  </h5>
                </div>
              </div>

              {/* When */}
              <div className="flex gap-2 pb-4">
                <div className="rounded-lg px-4 py-3 bg-primary-dark flex items-center justify-center text-white">
                  <HiCalendar size={20} />
                </div>
                <div className="flex flex-col justify-center gap-1">
                  <h4 className="text-light-dark text-xl font-semibold line-clamp-2">
                    When
                  </h4>
                  <h5 className="text-light-accent text-base font-semibold line-clamp-2">
                    {event.date && Object.values(event.date).join(" ")}
                  </h5>
                </div>
              </div>

              {/* Capacity */}
              <div className="flex gap-2 pb-4">
                <div className="rounded-lg px-4 py-3 bg-primary-dark flex items-center justify-center text-white">
                  <BsPeopleFill size={20} />
                </div>
                <div className="flex flex-col justify-center gap-1">
                  <h4 className="text-light-dark text-xl font-semibold line-clamp-2">
                    Capacity
                  </h4>
                  <h5 className="text-light-accent text-base font-semibold line-clamp-2 ">
                    {event.capacity}
                  </h5>
                </div>
              </div>
            </div>
            <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">
                Event 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">
                <div className="text-base sm:text-xl lg:text-2xl xl:text-3xl  text-light-dark">
                  {event.content}
                </div>
                <div className="bg-primary-dark border border-primary-dark absolute top-0 left-0 h-full transform -translate-x-14"></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 Events
            <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">
            {events.map((event) => (
              <EventCard event={event} />
            ))}
          </Slider>
        </div>
      </section>
    </div>
  );
};

export default SingleEventPage;

SingleEventPage.getInitialProps = ({ query }: NextPageContext): IProps => {
  const { eventId } = query;
  const event = events.find((event) => event.id === Number(eventId));

  return {
    event: event as IEvent,
  };
};

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

  return (
    <LayoutThree
      image={props.event.image}
      title={props.event.title}
      tag={props.event.date}
      // email={props.event.email}
      buttonText="Join Event"
    >
      {page}
    </LayoutThree>
  );
};
