// styling

// components
import LazyImage from '@components/LazyImage';

// utils
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { Swiper, SwiperSlide } from "swiper/react";
import { useState, useEffect, useRef, createRef } from "react";
import {
    A11y,
    Autoplay,
    EffectCoverflow,
    EffectCreative,
    EffectCube,
    EffectFade,
    EffectFlip,
    Manipulation
} from "swiper/modules";
import { useThemeProvider } from "@contexts/themeContext";
import Spring from "@components/Spring";
import { StyledSwiper } from "@components/AutoBanner/style";
import BannerControls from "@components/AutoBanner/BannerControls";
import BannerPagination from "@components/AutoBanner/BannerPagination";
import { NavLink, useNavigate } from "react-router-dom";
import styles from './styles.module.scss';
import { ROUTE_PATH } from "@constants/routes";
import Imgix from "@components/Imgix";
import LazyImgix from "@components/Imgix/LazyImgix";
import test from "@assets/userinfo/banner1.png";

const AutoBanner = ({ data, perview = 3, spaceBetween = 15, delay = 3000, speed = 1000 }) => {
    const [swiper, setSwiper] = useState(null);
    const { isMobile } = useThemeProvider();
    const navigate = useNavigate();
    if (isMobile()) perview = 1;
    const [activeIndex, setActiveIndex] = useState(0);
    useEffect(() => {
        if (swiper) {
            swiper.update();
        }
    }, [swiper]);
    const onClickNav = (item) => {
        let link = item.link;
        if (link.startsWith("http")) {
            window.open(link);
        } else if (link.indexOf('/') === -1) {
            global[link] && global[link]();
        } else {
            if (item.link_game != null && item.link_game > 0) {
                link = ROUTE_PATH.GAME + "/" + item.link_game;
            }
            navigate(link);
        }

        // adjust 点击banner图片
        if (item.bid == 1) {
            global.tracker.trackEvent("click_banner1");
            global.tracker.trackEvent("click_banner1_count");
        }
        else if (item.bid == 2) {
            global.tracker.trackEvent("click_banner2");
            global.tracker.trackEvent("click_banner2_count");
        }
        else if (item.bid == 3) {
            global.tracker.trackEvent("click_banner3");
            global.tracker.trackEvent("click_banner3_count");
        }
    }
    const renderControls = () => {
        let controls = (<></>);
        if (!isMobile()) {
            controls = (
                <BannerControls swiper={swiper} />
            );
        }
        return controls;
    }
    const renderPagination = () => {
        let pageCount = Math.ceil(data.length / perview);
        return (
            <BannerPagination pageCount={pageCount} swiper={swiper}></BannerPagination>
        )
    }
    const renderItems = () => {
        let itemsData = [];
        for (let i = 0; i < data.length; i += perview) {
            let s = i;
            let e = i + perview;
            itemsData.push(data.slice(s, e));
        }
        let lastData = itemsData[itemsData.length - 1];
        //补齐最后一组
        if (lastData != null) {
            let len = lastData.length;
            if (len < perview) {
                let temp = data.slice(0);
                let addSize = perview - len;
                for (let i = 0; i < addSize; i++) {
                    if (temp.length == 0) temp = data.slice(0);
                    lastData.push(temp.shift());
                }
            }
        }
        return (
            <>
                {
                    itemsData.map((items, index) => (
                        <SwiperSlide key={index}>
                            <div className="d-flex flex-row w-100" style={{ gap: `${spaceBetween}px` }}>
                                {
                                    items.map((item, iIndex) => (
                                        <button key={iIndex} className="img-box w-100" onClick={() => {
                                            onClickNav(item);
                                        }}>
                                            {/*<LazyImage style={{borderRadius:"var(--border-radius)"}} className="img-box-content" src={item.img} alt={item.alt}>*/}
                                            {/*</LazyImage>*/}
                                            {/*<Imgix className="lazyload img-box-content" style={{borderRadius:"var(--border-radius)"}} src={item.img} alt={item.alt} width={675}></Imgix>*/}
                                            {/* <LazyImgix className="lazyload img-box-content" style={{borderRadius:"var(--border-radius)"}} src={item.img} alt={item.alt} width={1350}></LazyImgix> */}
                                            <img className="lazyload img-box-content" style={{ borderRadius: "var(--border-radius)" }} src={item.img} alt={item.alt} width={1350}></img>
                                        </button>
                                    ))
                                }
                            </div>
                        </SwiperSlide>
                    ))
                }
            </>
        )
    }
    return (
        <Spring className="w-100">
            <div className={`w-100 p-relative ${styles.banner_container}`}>
                <StyledSwiper onSwiper={setSwiper}
                    slidesPerView={1}
                    spaceBetween={spaceBetween}
                    loop
                    autoplay={{ delay: delay, disableOnInteraction: false }}
                    effect="fade"
                    fadeEffect={{ crossFade: true }}
                    modules={[Autoplay]}
                    speed={speed}
                    onRealIndexChange={() => {
                        if (swiper) {
                            setActiveIndex(swiper.realIndex);
                        }
                    }}
                >
                    {
                        renderItems()
                    }
                </StyledSwiper>
                {renderControls()}
                {renderPagination()}
            </div>
        </Spring>
    )
}

AutoBanner.propTypes = {
    data: PropTypes.any.isRequired,
}

export default AutoBanner
