"use client";
import React, { useState, useEffect } from "react";
import { Swiper, SwiperSlide, SwiperClass } from "swiper/react";
import { EffectCoverflow } from "swiper/modules";
import "swiper/css";
import "swiper/css/effect-coverflow";
import { GoChevronLeft, GoChevronRight } from "react-icons/go";
import styles from "./show.module.scss";
import { fetchVideos } from "@/lib/cms";

interface VideoType {
  id: number;
  url: string;
  status?: string | null;
  order?: number | null;
  createTime: string;
  updateTime: string;
}

export default function Show() {
  const [swiperRef, setSwiperRef] = useState<SwiperClass | null>(null);
  const [videoUrlList, setVideoUrlList] = useState<VideoType[] | null>(null);
  useEffect(() => {
    fetchVideos().then(({ data: list }) => {
      const records = list?.records?.sort((b: VideoType, c: VideoType) => {
        return Date.parse(b.createTime) - Date.parse(c.createTime);
      });
      setVideoUrlList(records);
    });
  }, []);

  const slideToPrev = () => {
    swiperRef?.slidePrev();
  };

  const slideToNext = () => {
    swiperRef?.slideNext();
  };

  return (
    <div className={styles["company-show"]}>
      <div className={styles["show-container"]}>
        <div className={styles["show-content"]}>
          <div className={styles["show-title"]}>走近高潜</div>
        </div>
        <div className={styles["show-details"]}>
          <span className={styles["show-nav"]} onClick={() => slideToPrev()}>
            <GoChevronLeft />
          </span>

          <div className={styles["swiper-wrapper"]}>
            <Swiper
              spaceBetween={30}
              initialSlide={0}
              centeredSlides={true}
              loop={true}
              slidesPerGroup={1}
              slidesPerView={1.5}
              effect={"coverflow"}
              coverflowEffect={{
                rotate: 0,
                stretch: 0,
                depth: 100,
                modifier: 1,
                slideShadows: false,
              }}
              modules={[EffectCoverflow]}
              onSwiper={setSwiperRef}
            >
              {videoUrlList?.map((item, index) => {
                return (
                  <SwiperSlide key={index}>
                    <video
                      className={styles.video}
                      src={item.url}
                      controls
                      poster={`${item.url}?x-oss-process=video/snapshot,t_5000,m_fast`}
                      autoPlay={false}
                    ></video>
                  </SwiperSlide>
                );
              })}
            </Swiper>
          </div>
          <span className={styles["show-nav"]} onClick={() => slideToNext()}>
            <GoChevronRight />
          </span>
        </div>
      </div>
      <div className={styles["show-background"]}></div>
    </div>
  );
}
