import {getPrivateImageUrl, getThumb, humanFileSize} from "../../includes/functions";
import showPreview from "../../includes/preview";

export default function SliderCarouser({
                                           initFolders,
                                           slideHeight,
                                           slidesPerPage,
                                           slideAutoplay,
                                           slideAutoplaySpeed,
                                           slideDots,
                                           slideArrows,
                                           download,
                                           preview,
                                           notifications,
                                           sliderImageSize,
                                           sliderCustomSizeWidth,
                                           sliderCustomSizeHeight,
                                           slideGap,

                                           galleryOverlay,
                                           overlayDisplayType,
                                           galleryOverlayTitle,
                                           galleryOverlayDescription,
                                           galleryOverlaySize,
                                           nonce,
                                           shortcodeId,
                                       }) {


    const handlePreview = (e, id) => {
        if (!preview) return;

        showPreview(e, id, initFolders, {
            download,
            preview,
            inlinePreview: true,
        }, notifications, true, shortcodeId, nonce,);
    }

    const getSlidesPerPage = (device = 'md') => {
        const slides = slidesPerPage[device];

        if (initFolders.length < slides) {
            return initFolders.length;
        }

        return slides;
    }

    const settings = {
        dots: slideDots,
        arrows: slideArrows,
        speed: 500,
        slidesToShow: getSlidesPerPage('md'),
        infinite: true,
        initialSlide: 0,
        adaptiveHeight: true,

        autoplay: slideAutoplay,
        autoplaySpeed: parseInt(slideAutoplaySpeed),
        cssEase: "linear",

        nextArrow: <span className="slick-arrow slick-next"><svg xmlns="http://www.w3.org/2000/svg" width="24"
                                                                 height="24" viewBox="0 0 320 512"><path
            d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/></svg></span>,
        prevArrow: <span className="slick-arrow slick-prev"><svg xmlns="http://www.w3.org/2000/svg" width="24"
                                                                 height="24" viewBox="0 0 320 512"><path
            d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/></svg></span>,

        responsive: [
            {
                breakpoint: 576,
                settings: {
                    slidesToShow: getSlidesPerPage('xs'),
                    dots: false,
                }
            },
            {
                breakpoint: 768,
                settings: {
                    slidesToShow: getSlidesPerPage('sm'),
                }
            },
            {
                breakpoint: 992,
                settings: {
                    slidesToShow: getSlidesPerPage('md'),
                }
            },
            {
                breakpoint: 1200,
                settings: {
                    slidesToShow: getSlidesPerPage('lg'),
                }
            },
            {
                breakpoint: 2800,
                settings: {
                    slidesToShow: getSlidesPerPage('xl'),
                }
            }
        ]
    }

    return (
        <div className={`igd-slider`} style={{'--slide-height': slideHeight, '--slide-gap': `${slideGap}px`,}}>
            <Slider.default {...settings}>
                {initFolders.map(item => {

                        const {id, accountId, name, description, size} = item;

                        const src = getThumb(item, sliderImageSize, {w: sliderCustomSizeWidth, h: sliderCustomSizeHeight});

                        return (
                            <>
                                <div className="slider-img-wrap" onClick={(e) => handlePreview(e, id)}>
                                    <img
                                        src={src}
                                        alt={name}
                                        referrerPolicy={'no-referrer'}
                                        onError={e => {
                                            const $this = e.target;

                                            $this.src = getPrivateImageUrl({id, accountId}, 'medium');
                                        }}
                                    />
                                </div>


                                {!!galleryOverlay &&
                                    <div className={`igd-gallery-item-overlay type-${overlayDisplayType}`}>

                                        {!!galleryOverlayTitle &&
                                            <div className="overlay-title">{name}</div>
                                        }

                                        {!!galleryOverlayDescription && !!description &&
                                            <p className="overlay-description">{description}</p>
                                        }

                                        {!!galleryOverlaySize &&
                                            <span className="overlay-size">{humanFileSize(size)}</span>
                                        }

                                    </div>
                                }

                            </>
                        )
                    }
                )}
            </Slider.default>
        </div>
    )
}