"use client";
import styles from "./index.module.scss";
import { Maybe, ComponentHeroOne } from "@/types/gpl/graphql";
import Button from "@/modules/common/components/button/primary";
import { Swiper, SwiperSlide } from "swiper/react";
import type { Swiper as SwiperType } from "swiper/types";
import { Autoplay, EffectFade, Navigation, Pagination } from "swiper/modules";

import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/effect-fade";
import "swiper/css/pagination";

type Props = {
  param?: Maybe<Array<Maybe<ComponentHeroOne>>>;
};
export default function Banner({ param }: Props) {
  const handleSlideChange = (swiper: SwiperType) => {
    swiper.el.querySelectorAll("video").forEach((video) => {
      video.pause();
      video.currentTime = 0;
    });
    const activeVideo =
      swiper.slides[swiper.activeIndex]?.querySelector("video");
    if (activeVideo) {
      activeVideo.play().catch(() => {});
    }
  };
  return (
    <Swiper
      className={styles.container}
      modules={[Autoplay, EffectFade, Navigation, Pagination]}
      autoplay={{ delay: 10000, disableOnInteraction: false }}
      onSwiper={handleSlideChange}
      onSlideChange={handleSlideChange}
      effect="fade"
      speed={1000}
      fadeEffect={{ crossFade: true }}
      pagination
      navigation={{
        prevEl: ".swiper-button-prev",
        nextEl: ".swiper-button-next",
      }}
    >
      {param?.map((item, index) => {
        return (
          <SwiperSlide key={index} className={styles?.swiper}>
            <div className={styles.overlay}>
              <div className={styles.content}>
                <div className={styles.heroTextWrap}>
                  <h1 className={styles.title}>{item?.title}</h1>
                  <p className={styles.desc}>{item?.description}</p>
                  <Button text={item?.button?.text} link={item?.button?.link} />
                </div>
              </div>
            </div>
            <video
              poster={item?.cover?.url}
              src={item?.video?.url}
              muted
              playsInline
              preload="metadata"
              loop
            />
          </SwiperSlide>
        );
      })}
      <div className="swiper-button-prev">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
          className="lucide lucide-circle-chevron-left"
        >
          <circle cx="12" cy="12" r="10" />
          <path d="m14 16-4-4 4-4" />
        </svg>
      </div>
      <div className="swiper-button-next">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
          className="lucide lucide-circle-chevron-right"
        >
          <circle cx="12" cy="12" r="10" />
          <path d="m10 8 4 4-4 4" />
        </svg>
      </div>
      <div className="swiper-pagination" />
    </Swiper>
  );
}

// Hero.module.scss
.container {
  width: 100%;
  height: 700px;
  display: flex;
  align-items: center;
  position: relative;

  .overlay {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    padding: 0 20px;
  }

  .content {
    width: 100%;
    max-width: var(--max-width);
    
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;

    @include md {
    }
    .heroTextWrap {
      color: #fff;
      white-space: pre-line;
      .title {
        font-size: 46px;
        font-weight: 800;
        margin: 0 0 36px;
        @include md {
          font-size: 64px;
        }
      }

      .desc {
        font-size: 16px;
        line-height: 1.6;
        margin: 0 0 48px;
        font-weight: 700;
        @include md {
          font-size: 18px;
        }
      }
    }
  }



  .swiper {
    // border: 2px solid yellow;
    video {
      // border: 1px solid blue;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  :global(.swiper-button-next){
    svg{
      color: #fff;
      width: 50px;
      height: 50px;
      fill: none !important;
    }
  }

  :global(.swiper-button-prev){
    svg{
      color: #fff;
      width: 50px;
      height: 50px;
      fill: none !important;
    }
  }
}