import LayoutTwo from "components/layout/LayoutTwo";
import { ITeam } from "data";
import { team } from "dummyData";
import { NextPageContext } from "next";
import Image from "next/image";
import Link from "next/link";
import { NextPageWithLayout } from "pages/_app";
import { ReactElement } from "react";
import Slider from "react-slick";

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

interface IProps {
  member: ITeam;
}

const MemberPage: NextPageWithLayout<IProps> = ({ member }) => {
  // const router = useRouter();
  // const { memberId } = router.query;

  // const member = team.find((member) => member.id === Number(memberId));

  if (!member) {
    return <div>Member 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="bg-accent-dark ">
      <div className="mx-auto max-w-[80%] py-10">
        <main>
          <section className="flex flex-col sm:items-start ">
            <div className="flex flex-col sm:flex-row gap-3 lg:gap-8">
              <div className="relative container h-[40vh] w-[40vh]">
                <Image
                  src={`/team/${member.image}`}
                  layout="fill"
                  objectFit="cover"
                  objectPosition={"center top"}
                  className="rounded-lg object-cover"
                />
              </div>
              <div className="flex flex-col justify-center">
                <h1 className="text-2xl font-semibold text-primary-dark">
                  {member.name}
                </h1>
                <h2 className="text-lg font-semibold text-light-accent">
                  {member.profession}
                </h2>
              </div>
            </div>
            <article className="md:border-primary-dark border-t border-l md:p-5 mt-10">
              {typeof member.bio === "string" && (
                <p className="text-base sm:text-xl lg:text-2xl xl:text-3xl  text-light-dark">
                  {member.bio}
                </p>
              )}

              {typeof member.bio === "object" && (
                <div className="lg:flex lg:items-start relative flex-col gap-3 p-5">
                  {member.bio.intro && (
                    <p className="text-base sm:text-xl lg:text-2xl xl:text-3xl   font-bold text-primary-dark">
                      {member.bio.intro}
                    </p>
                  )}
                  {member.bio.body && (
                    <p className="text-base sm:text-xl lg:text-2xl xl:text-3xl  text-light-dark">
                      {member.bio.body}
                    </p>
                  )}
                  {member.bio.outro && (
                    <p className="text-base sm:text-xl lg:text-2xl xl:text-3xl   font-semibold text-primary-dark">
                      {member.bio.outro}
                    </p>
                  )}
                </div>
              )}

              <div className="flex flex-col sm:flex-row gap-3 lg:gap-8 mt-5 items-center justify-center">
                <div className="flex items-end gap-2">
                  <h3 className="text-lg font-semibold text-primary-dark">
                    Email
                  </h3>
                  <h4 className="text-base font-semibold text-light-accent underline">
                    <a href={`mailto:${member.email}`}>{member.email}</a>
                  </h4>
                </div>
              </div>

              {/* <div className="flex gap-5  mt-8 justify-center">
                <Link href="https://www.linkedin.com/in/mavenmentorship">
                  <FaLinkedinIn
                    className="text-primary-dark cursor-pointer hover:animate-bounce"
                    size={18}
                  />
                </Link>
                <Link href="https://twitter.com/mavenmentorship">
                  <FaTwitter
                    className="text-primary-dark cursor-pointer hover:animate-bounce"
                    size={18}
                  />
                </Link>
                <Link href="https://www.instagram.com/mavenmentorship/">
                  <FaInstagram
                    className="text-primary-dark cursor-pointer hover:animate-bounce"
                    size={18}
                  />
                </Link>
                <Link href="https://www.facebook.com/mavenmentorship/">
                  <FaFacebookF
                    className="text-primary-dark cursor-pointer hover:animate-bounce"
                    size={18}
                  />
                </Link>
                <Link href="https://www.tiktok.com/@mavenmentor">
                  <FaTiktok
                    className="text-primary-dark cursor-pointer hover:animate-bounce"
                    size={18}
                  />
                </Link>

              </div> */}
            </article>

            <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 Board members
                <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">
                {team.map((member) => (
                  <div key={member.id.toString()} className="mx-2 px-4">
                    <article className="relative">
                      <Link href={`/board/${member.id}`}>
                        <div className=" aspect-square overflow-hidden container relative group">
                          <Image
                            //   className="h-full w-full "
                            src={`/team/${member.image}`}
                            alt=""
                            layout="fill"
                            className=" object-cover transition-all duration-300 group-hover:scale-110 hover:rounded-lg"
                          />
                          <div className="absolute top-0 left-0 w-full h-full flex flex-col items-center justify-center bg-gradient-to-t  from-[#5e312f] to-[#5e312f63] transform transition-all duration-250 translate-y-full group-hover:translate-y-0">
                            <div className="relative h-16 w-16 mb-10">
                              <Image src={"/favicon.png"} layout="fill" />
                            </div>
                            <h3 className="text-sm font-semibold sm:text-md md:text-xl">
                              <span title={member.name}>
                                <span className="text-secondary-dark">
                                  {member.name}
                                </span>
                              </span>
                            </h3>
                            <h3 className="text-sm font-semibold text-white sm:text-md md:text-xl ">
                              <span>More info</span>
                            </h3>
                          </div>
                        </div>
                      </Link>

                      <div className="mt-4 flex items-start justify-between">
                        <div className="text-center w-full">
                          <h3 className="font-semibold text-base md:text-xl">
                            <Link href={"#."}>
                              <a title="">
                                <span className="text-primary-dark">
                                  {member.name}
                                </span>
                              </a>
                            </Link>
                          </h3>
                          <h4>
                            <span
                              className="text-xs  sm:text-sm md:text-base block line-clamp-2"
                              aria-hidden="true"
                            >
                              {member.profession}
                            </span>
                          </h4>
                        </div>
                      </div>
                    </article>
                  </div>
                ))}
              </Slider>
            </div>
          </section>
        </main>
      </div>
    </div>
  );
};

export default MemberPage;

MemberPage.getInitialProps = ({ query }: NextPageContext): IProps => {
  const { memberId } = query;
  const member = team.find((member) => member.id === Number(memberId));

  return {
    member: member as ITeam,
  };
};

MemberPage.getLayout = function getLayout(page: ReactElement) {
  const { props } = page;
  return (
    <LayoutTwo image={"/team/teambg.jpg"} title={props.member.name}>
      {page}
    </LayoutTwo>
  );
};
