import { RichText } from "@wordpress/block-editor";
import {
    sanitizeURL,
    BlockProps,
    sanitizeIconValue,
} from "@essential-blocks/controls";
const Save = ({ attributes }) => {
    const {
        blockId,
        sliderType,
        sliderContentType,
        images,
        arrows,
        adaptiveHeight,
        autoplay,
        autoplaySpeed,
        dots,
        fade,
        infinite,
        vertical,
        pauseOnHover,
        speed,
        initialSlide,
        textAlign,
        classHook,
        arrowNextIcon,
        arrowPrevIcon,
        dotPreset,
        isRTLEnable,
        titleTag,
        contentTag,
        version,
        showLightbox,
    } = attributes;

    //Slider Settings
    const settings = {
        arrows,
        adaptiveHeight,
        autoplay,
        autoplaySpeed,
        dots,
        fade,
        infinite,
        pauseOnHover,
        slidesToShow: attributes.slideToShowRange,
        speed,
        vertical,
        currentSlide: 0,
        rtl: isRTLEnable,
        responsive: [
            {
                breakpoint: 1025,
                settings: {
                    slidesToShow:
                        attributes.TABslideToShowRange ||
                        attributes.slideToShowRange,
                },
            },
            {
                breakpoint: 767,
                settings: {
                    slidesToShow:
                        attributes.MOBslideToShowRange ||
                        attributes.slideToShowRange,
                },
            },
        ],
    };

    const sliderTypeClass =
        sliderType === "content"
            ? "eb-slider-type-content"
            : "eb-slider-type-image";

    return (
        <BlockProps.Save attributes={attributes}>
            <div
                className={`eb-parent-wrapper eb-parent-${blockId} ${classHook}`}
            >
                <div
                    className={`eb-slider-wrapper ${blockId}`}
                    data-blockid={blockId}
                    data-version={version}
                    data-settings={btoa(JSON.stringify(settings))}
                    data-arrowNextIcon={sanitizeIconValue(arrowNextIcon)}
                    data-arrowPrevIcon={sanitizeIconValue(arrowPrevIcon)}
                    data-lightbox={version === "v2" ? showLightbox : false}
                >
                    <div className={`eb-slider-init ${sliderTypeClass}`}>
                        {images.map((image, index) => (
                            <div
                                className={`eb-slider-item ${sliderContentType}`}
                                key={index}
                                data-src={image.url}
                            >
                                {image.buttonUrl && image.isValidUrl ? (
                                    <div>
                                        <a
                                            href={sanitizeURL(image.buttonUrl)}
                                            target={
                                                image.openNewTab
                                                    ? "_blank"
                                                    : "_self"
                                            }
                                            rel="noopener"
                                        >
                                            <img
                                                className="eb-slider-image"
                                                data-lazy={image.url}
                                            />
                                        </a>
                                    </div>
                                ) : (
                                    <div>
                                        <img
                                            className="eb-slider-image"
                                            data-lazy={image.url}
                                        />
                                    </div>
                                )}
                                {sliderType === "content" && (
                                    <div
                                        className={`eb-slider-content align-${textAlign}`}
                                    >
                                        {image.title &&
                                            image.title.length > 0 && (
                                                <RichText.Content
                                                    tagName={titleTag}
                                                    className="eb-slider-title"
                                                    value={image.title}
                                                />
                                            )}
                                        {image.subtitle &&
                                            image.subtitle.length > 0 && (
                                                <RichText.Content
                                                    tagName={contentTag}
                                                    className="eb-slider-subtitle"
                                                    value={image.subtitle}
                                                />
                                            )}

                                        <div className="eb-slider-button-wrapper">
                                            {image.showButton &&
                                                image.buttonText &&
                                                image.buttonText.length > 0 && (
                                                    <a
                                                        href={
                                                            image.buttonUrl &&
                                                            image.isValidUrl
                                                                ? sanitizeURL(
                                                                      image.buttonUrl,
                                                                  )
                                                                : ""
                                                        }
                                                        className="eb-slider-button"
                                                        target={
                                                            image.openNewTab
                                                                ? "_blank"
                                                                : "_self"
                                                        }
                                                        rel="noopener"
                                                    >
                                                        <RichText.Content
                                                            value={
                                                                image.buttonText
                                                            }
                                                        />
                                                    </a>
                                                )}

                                            {image.showSecondButton &&
                                                image.secondButtonText &&
                                                image.secondButtonText.length >
                                                    0 && (
                                                    <a
                                                        href={
                                                            image.secondButtonUrl &&
                                                            image.isValidUrl
                                                                ? sanitizeURL(
                                                                      image.secondButtonUrl,
                                                                  )
                                                                : ""
                                                        }
                                                        className="eb-slider-second-button"
                                                        target={
                                                            image.secondButtonOpenNewTab
                                                                ? "_blank"
                                                                : "_self"
                                                        }
                                                        rel="noopener"
                                                    >
                                                        <RichText.Content
                                                            value={
                                                                image.secondButtonText
                                                            }
                                                        />
                                                    </a>
                                                )}
                                        </div>
                                    </div>
                                )}
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </BlockProps.Save>
    );
};

export default Save;