import React from 'react'
import { EmblaOptionsType } from 'embla-carousel'
import { usePrevNextButtons, PrevButton, NextButton } from './EmblaCarouselArrowButtons'
import useEmblaCarousel from 'embla-carousel-react'
import { SliderBoxImage } from '@/components/property-box/PropertyBox'

type PropType = {
    slides?: number[]
    options?: EmblaOptionsType
    axis?: string;
    children?: any;
}

const EmblaCarousel: React.FC<PropType> = (props: any) => {

    const option: EmblaOptionsType = { dragFree: true, axis: props?.axis || 'x' }

    const { slides } = props
    const [emblaRef, emblaApi] = useEmblaCarousel(option)

    const {
        prevBtnDisabled,
        nextBtnDisabled,
        onPrevButtonClick,
        onNextButtonClick
    } = usePrevNextButtons(emblaApi)


    return (
        <section className="embla">
            <div className="embla__viewport" ref={emblaRef}>
                <div className="embla__container">
                    {slides.map((data: any) => (
                        <SliderBoxImage data={data} />
                    ))}
                </div>
            </div>

            <div className="embla__controls">
                <div className="embla__buttons">
                    <PrevButton onClick={onPrevButtonClick} disabled={prevBtnDisabled} />
                    <NextButton onClick={onNextButtonClick} disabled={nextBtnDisabled} />
                </div>

                {/* <SelectedSnapDisplay
                    selectedSnap={selectedSnap}
                    snapCount={snapCount}
                /> */}
            </div>
        </section>
    )
}

export default EmblaCarousel







export const CustomCarouselMain: React.FC<PropType> = (props: any) => {

    const option: EmblaOptionsType = { dragFree: true, axis: props?.axis || 'x' }

    const { slides, children } = props
    const [emblaRef, emblaApi] = useEmblaCarousel(option)

    const {
        prevBtnDisabled,
        nextBtnDisabled,
        onPrevButtonClick,
        onNextButtonClick
    } = usePrevNextButtons(emblaApi)


    return (
        <section className="embla embla--vertical">
            <div className="embla__viewport" ref={emblaRef}>
                <div className="embla__container">
                    {children}
                </div>
            </div>

            {/* <div className="embla__controls">
                <div className="embla__buttons">
                    <PrevButton onClick={onPrevButtonClick} disabled={prevBtnDisabled} />
                    <NextButton onClick={onNextButtonClick} disabled={nextBtnDisabled} />
                </div>

                {/* <SelectedSnapDisplay
                    selectedSnap={selectedSnap}
                    snapCount={snapCount}
                /> 
            </div> */}
        </section>
    )
}