/* -------------------------------------------------------------------------- */
/*                                 Components                                 */
/* -------------------------------------------------------------------------- */
import Heading from "./typography/Heading";
import SkeletonCard from "./SkeletonCard";
import { Button } from "./Button/Button";
import Avatar from "./Avatar";
import Card from "./Card";

/* -------------------------------------------------------------------------- */
/*                                   Swiper                                   */
/* -------------------------------------------------------------------------- */
import { Swiper, SwiperSlide } from "swiper/react";
import SwiperCore, { Navigation } from "swiper";
import "swiper/css/pagination";
import "swiper/css/navigation";
import "./styles.css";
import "swiper/css";

/* -------------------------------------------------------------------------- */
/*                                    Authors                                 */
/* -------------------------------------------------------------------------- */
import Authors from "./Authors.json";

/* -------------------------------------------------------------------------- */
/*                                    Icons                                   */
/* -------------------------------------------------------------------------- */
import { ReactComponent as SVGCaretRight } from "assets/svg/caret-right.svg";
import Link from "./typography/Link";

/* -------------------------------------------------------------------------- */
/*                                  Variables                                 */
/* -------------------------------------------------------------------------- */
SwiperCore.use([Navigation]);

/* -------------------------------------------------------------------------- */
/*                               Number of Cards                              */
/* -------------------------------------------------------------------------- */
let twoCards: boolean = false;
let threeCards: boolean = false;
console.log(`Number of cards ${Authors.length}`);
if (Authors.length == 2) {
  twoCards = true;
} else if (Authors.length == 3) {
  threeCards = true;
}

/**
 * Featured authors component to display ...
 */
export default function FeaturedAuthors(): JSX.Element {
  return (
    <div>
      {/* The Title of Featured Authors section */}
      <Heading className="text-center my-8">Featured Authors</Heading>

      {/* Featured Authors section */}
      <div className="slider-wrapper Authors">
        <Swiper
          slidesPerView={1.25}
          slidesPerGroup={1}
          spaceBetween={25}
          loop={Authors.length > 4 ? true : false}
          loopFillGroupWithBlank={false}
          breakpoints={{
            768: {
              slidesPerView: 2,
              slidesPerGroup: 2,
            },
            1024: {
              slidesPerView: 2,
              slidesPerGroup: 2,
            },
            1280: {
              slidesPerView: 4,
              slidesPerGroup: 4,
            },
            1580: {
              slidesPerView: 4,
              slidesPerGroup: 4,
            },
          }}
        >
          {Authors.map((card) => (
            <SwiperSlide>
              <Card className="flex-1">
                <Card.CardContent>
                  <Card.CardHeader>
                    <Card.Avatar>
                      {card.img ? (
                        <Avatar
                          className="w-12 h-12"
                          src={card.img}
                          alt={card.Title}
                        />
                      ) : (
                        <Avatar
                          className="w-12 h-12"
                          src={card.img}
                          alt={card.Title}
                        >
                          {card.Title[0]}
                        </Avatar>
                      )}
                    </Card.Avatar>
                    <Card.Title>{card.Title}</Card.Title>
                  </Card.CardHeader>
                  <Card.Body>{card.Body}</Card.Body>
                </Card.CardContent>

                <Card.CardAction href={card.Link}>
                  <Link className="text-blue-500 font-bold ">See More</Link>
                  <SVGCaretRight className="fill-blue-500 w-4 h-4" />
                </Card.CardAction>
              </Card>
            </SwiperSlide>
          ))}

          {twoCards && [
            <SwiperSlide className="hidden xl:block">
              <SkeletonCard className="flex-1">
                <SkeletonCard.Content>
                  <SkeletonCard.Header>
                    <SkeletonCard.Avatar />
                    <SkeletonCard.Title />
                  </SkeletonCard.Header>
                  <SkeletonCard.Body />
                </SkeletonCard.Content>
                <SkeletonCard.Action />
              </SkeletonCard>
            </SwiperSlide>,

            <SwiperSlide className="hidden xl:block">
              <SkeletonCard className="flex-1">
                <SkeletonCard.Content>
                  <SkeletonCard.Header>
                    <SkeletonCard.Avatar />
                    <SkeletonCard.Title />
                  </SkeletonCard.Header>
                  <SkeletonCard.Body />
                </SkeletonCard.Content>
                <SkeletonCard.Action />
              </SkeletonCard>
            </SwiperSlide>,
          ]}

          {threeCards && [
            <SwiperSlide className="hidden xl:block">
              <SkeletonCard className="flex-1">
                <SkeletonCard.Content>
                  <SkeletonCard.Header>
                    <SkeletonCard.Avatar />
                    <SkeletonCard.Title />
                  </SkeletonCard.Header>
                  <SkeletonCard.Body />
                </SkeletonCard.Content>
                <SkeletonCard.Action />
              </SkeletonCard>
            </SwiperSlide>,
          ]}
        </Swiper>
      </div>

      <Button emphasis="high" className="font-bold m-auto my-8">
        Show All
      </Button>
    </div>
  );
}