'use client'

import { montserratFont } from "@/app/layout";
import { CarouselSlide } from "@/types/entities";

interface SmartSliderProps {
    sliderId: string
    slidesPerView?: number
    slides: CarouselSlide[]
    showIndicator?: boolean
    showTitle?: boolean
    padding?: boolean
}

export const SmartSlider = ({ sliderId, padding, showTitle, slidesPerView, slides, showIndicator }: SmartSliderProps) => {
    // return (
    //     <>
    //         <style>
    //             {`
    //         .smart-slider {
    //             ul::-webkit-scrollbar {
    //             display: none;
    //             }
    //             ul {
    //             scroll-behavior: smooth;
    //                 padding: 20px;
    //                 display: flex;

    //                 overflow-x: scroll;
    //                 scroll-snap-type: x mandatory;
    //                 scroll-marker-group: after;
    //                 /* Hide scrollbar for IE, Edge, and Firefox */
    //                 -ms-overflow-style: none;  /* IE and Edge */
    //                 scrollbar-width: none;     /* Firefox */
    //             }

    //             li {
    //                 list-style-type: none;
    //                 background-color: #eeeeee;
    //                 border: 1px solid #dddddd;
    //                 padding: 20px;

    //                 flex: 0 0 100%;

    //                 scroll-snap-align: center;
    //             }

    //             ul::scroll-button(*) {
    //                 border: 0;
    //                 font-size: 2rem;
    //                 background: none;
    //                 color: black;
    //                 opacity: 0.7;
    //                 cursor: pointer;
    //             }

    //             ul::scroll-button(*):hover,
    //             ul::scroll-button(*):focus {
    //                 opacity: 1;
    //             }

    //             ul::scroll-button(*):active {
    //                 translate: 1px 1px;
    //             }

    //             ul::scroll-button(*):disabled {
    //                 opacity: 0.2;
    //                 cursor: unset;
    //             }

    //             ul::scroll-button(left) {
    //                 content: "◄" / "Previous";
    //             }

    //             ul::scroll-button(right) {
    //                 content: "►" / "Next";
    //             }

    //             ul {
    //                 anchor-name: --my-carousel;
    //             }

    //             ul::scroll-button(*) {
    //                 position: absolute;
    //                 position-anchor: --my-carousel;
    //             }


    //             ul::scroll-button(left) {
    //                 right: calc(anchor(left) - 70px);
    //                 bottom: calc(anchor(top) + 13px);
    //             }

    //             ul::scroll-button(right) {
    //                 left: calc(anchor(right) - 70px);
    //                 bottom: calc(anchor(top) + 13px);
    //             }

    //             ul::scroll-marker-group {
    //                 position: absolute;
    //                 position-anchor: --my-carousel;
    //                 top: calc(anchor(bottom) - 70px);
    //                 justify-self: anchor-center;

    //                 display: flex;
    //                 justify-content: center;
    //                 gap: 20px;
    //             }

    //             li::scroll-marker {
    //                 content: attr(data-accname);
    //                 width: 16px;
    //                 height: 16px;
    //                 background-color: transparent;
    //                 border: 2px solid black;
    //                 border-radius: 50%;
    //                 overflow: hidden;
    //                 text-indent: 16px;
    //             }

    //             li::scroll-marker:target-current {
    //                 background-color: black;
    //             }
    //         }
    //         `}
    //         </style>
    //         <div className="w-full">
    //             <div className="smart-slider">
    //                 <ul className="w-full">
    //                     <li data-accname="Item 1">
    //                         <h2>Page 1</h2>
    //                     </li>
    //                     <li data-accname="Item 2">
    //                         <h2>Page 2</h2>
    //                     </li>
    //                     <li data-accname="Item 3">
    //                         <h2>Page 3</h2>
    //                     </li>
    //                     <li data-accname="Item 4">
    //                         <h2>Page 4</h2>
    //                     </li>
    //                 </ul>
    //             </div>
    //         </div>
    //     </>
    // )

    return (
        <div className="smart-slider relative">
            <div className="carousel w-full">
                {slides.map((slide) => (
                    <a
                        id={`item${slide.id}`}
                        key={slide.id}
                        href={slide.href || '#'}
                        className={`carousel-item ${slidesPerView === 2 ? 'w-1/2' : slidesPerView === 3 ? 'w-1/3' : slidesPerView === 4 ? 'w-1/4' : slidesPerView === 5 ? 'w-1/5' : slidesPerView === 6 ? 'w-1/6' : 'w-full'} relative overflow-hidden`}
                    >
                        {showTitle &&
                            <div className="flex justify-center items-center w-full h-full absolute bg-black/50">
                                <span className={`text-xl ${montserratFont.className} text-white`} >{slide.title}</span>
                            </div>
                        }
                        <img
                            src={slide.src}
                            className={`w-full ${padding ? 'p-4' : ''}`}
                        />
                    </a>
                ))}
            </div>
            {showIndicator &&
                <div className="absolute bottom-4 flex w-full justify-center gap-2 py-2">
                    {slides.map((slide) => (
                        <a key={slide.id} href={`#item${slide.id}`} className="focus:bg-[#0063A7] btn btn-xs w-4 h-4 bg-gray-800 btn-circle border-none">
                        </a>
                    ))}
                </div>}
        </div>
    );
};