function HyunSlider(param){
    if(!param.id) {
        console.error("슬라이드 아이디는 필수입니다.");
        return
    }
    this.slideContent = document.querySelector(param.id)
    this.sliderWrapper = this.slideContent.querySelector('.hyun-slider-wrapper')
    this.sliderContainer = this.slideContent.querySelector('.hyun-slider')
    this.slides = this.slideContent.querySelectorAll('.hyun-slider-item')
    this.slideCount = this.slides.length;
    this.slideWidth = param.width || 300
    this.slideMargin = param.margin || 15
    this.currentIndex = 0
    this.loop = param.loop || false
    this.pagination = param.pagination || false
    this.viewslide = param.view || 3
    // this.viewslide = Math.min(param.view || this.slideCount, this.slideCount);
    this.speed = param.speed || 1
    this.autoplay = param.autoplay
    this.palybutton = param.palybutton


    let slideWidth = this.slideWidth + 'px';

    this.slides.forEach(slide => {
        slide.style.width = slideWidth;
    });

    //3개이하 일때 슬라이드 생성안되도록
    if (this.slideCount > 3) {
        this.controlButton();
        this.makeClone();
        this.newPagination();
        this.paginationActive();
        this.drag();
        this.autoPlay();
    }

    this.sliderContainer.style.display = 'flex';
    this.sliderContainer.style.gap =  this.slideMargin + 'px'
    this.slideContent.style.width = (this.slideWidth + this.slideMargin) * this.viewslide + 120 + 'px';
    this.sliderWrapper.style.width = (this.slideWidth + this.slideMargin) * this.viewslide - this.slideMargin + 'px';

} 

HyunSlider.prototype.setInitialPos = function(){
    //복사전 넓이
    const initialTranslateValue = -((this.slideWidth + this.slideMargin) * this.slideCount);
    this.sliderContainer.style.transform = `translateX(${initialTranslateValue}px)`;
}
HyunSlider.prototype.updateWidth = function(){
    //복사후 넓이
    const newWidth = (this.slideWidth + this.slideMargin) * (this.slideCount * 3) + 'px';
    
    this.sliderContainer.style.width = newWidth;
}
HyunSlider.prototype.makeClone = function(){
    if (this.loop) {
        const _this = this

        this.updateWidth(); //복사 후 전체 넓이값
        this.setInitialPos();
    
        // 뒤에 복사본
        for (let i = 0; i < this.slideCount; i++) {
            let cloneSlide = this.slides[i].cloneNode(true);
            cloneSlide.classList.add('clone');
            this.sliderContainer.appendChild(cloneSlide);
        }
        // 앞에 복사
        for (let i = this.slideCount - 1; i >= 0; i--) {
            let cloneSlide = this.slides[i].cloneNode(true);
            cloneSlide.classList.add('clone');
            this.sliderContainer.prepend(cloneSlide);
        }
    } else {
        this.sliderContainer.style.width = (this.slideWidth + this.slideMargin) * this.slideCount - this.slideMargin + 'px';
        //루프가 아닐 경우 셋팅값
    }

}
HyunSlider.prototype.goToslide = function(idx){
    const _this = this

    this.sliderContainer.style.transition = `left 0.1s ease-out`;
    this.sliderContainer.style.left = -idx * (this.slideWidth + this.slideMargin) + 'px';
    this.currentIndex = idx;

    if (this.currentIndex == this.slideCount || this.currentIndex == -this.slideCount) {

        setTimeout(function () {
            _this.sliderContainer.style.transition = "none"

            const initialTranslateValue = -((this.slideWidth + this.slideMargin) * this.slideCount);
            _this.sliderContainer.style.left = '0px';
            _this.currentIndex = 0;
        }, 100);

    }

}
HyunSlider.prototype.controlButton = function(){
        const buttonWrap = document.createElement('div');
        buttonWrap.className = "btn_wrap";
        this.slideContent.appendChild(buttonWrap);
    
        buttonWrap.innerHTML += 
        `<button class="prev"><img src="https://i.ibb.co/GdybzNY/btn.png" alt="btn" border="0"></button>
        <button class="next"><img src="https://i.ibb.co/GdybzNY/btn.png" alt="btn" border="0"></button>`;
        
        const navPrev=  this.slideContent.querySelector('.prev')
        const navNext=  this.slideContent.querySelector('.next')
        this.slideContent.classList.add('showbutton')
        const _this = this

            navNext.addEventListener('click', function () {
                if (_this.loop) {
                    _this.goToslide(_this.currentIndex + 1);
                    _this.paginationActive();
                } else {
                    if(_this.currentIndex < _this.slideCount -3) {
                        _this.goToslide(_this.currentIndex + 1);
                        _this.paginationActive();
                    }
                }
            });
            navPrev.addEventListener('click', function () {
                if (_this.loop) {
                    _this.goToslide(_this.currentIndex - 1);
                    _this.paginationActive();
                } else {
                    if (_this.currentIndex > 0) {
                        _this.goToslide(_this.currentIndex - 1);
                        _this.paginationActive();
                    }
                }
            });

}
HyunSlider.prototype.newPagination = function(){
    const _this = this
    if(this.pagination){
        const pagination = document.createElement('div');
        pagination.className = "hyun_pagination";
        this.slideContent.appendChild(pagination);

        pagination.classList.add('showpagination')
        const count = _this.loop ? this.slideCount : this.slideCount - 2
        for (let i = 0; i < count; i++) { 
            if (i === 0) {
                pagination.innerHTML += `<li class="active">•</li>`;
            } else {
                pagination.innerHTML += `<li>•</li>`;
            } 
        }
        this.paginationActive();
    }
}
HyunSlider.prototype.paginationActive = function(){
        const _this = this
        const paginationItems = this.slideContent.querySelectorAll(".hyun_pagination > li");
        const positiveIndex = (this.currentIndex + this.slideCount) % this.slideCount;
            //무한 슬라이드를 구현하기 위해서 currentIndex + slideCount로
            //양수로 값을 얻고 slideCount를 나누기 때문에 양수의 값을 얻어
            //정상적인 인덱스에서 활동
        if (paginationItems.length > 0) {
            paginationItems.forEach((i) => {
                i.classList.remove("active")
            });

            const pageIndex = _this.loop ? positiveIndex : _this.currentIndex
            paginationItems[pageIndex].classList.add("active");

            console.log(pageIndex);

            paginationItems.forEach((item, index) => {
            item.addEventListener('click', function () {
                    _this.goToslide(index);
                    _this.paginationActive();
                    item.classList.add("active");
                    });
            });
        }
}
HyunSlider.prototype.drag = function(){
    const _this = this
    let startPoint = 0;
    let endPoint = 0;

    this.sliderWrapper.addEventListener("mousedown", (e) => {
        startPoint = e.pageX; 
    });

    this.sliderWrapper.addEventListener("mouseup", (e) => {
        endPoint = e.pageX; 

        if (startPoint < endPoint) {
            if (this.loop) {
                //왼쪽에서 오른쪽 왼쪽이 오른쪽보다 작을 경우
                _this.goToslide(_this.currentIndex - 1);
                _this.paginationActive();
            } else {
                if (_this.currentIndex > 0) {
                    _this.goToslide(_this.currentIndex - 1);
                    _this.paginationActive();
                }
            }
        } else if (startPoint > endPoint) {
            if (this.loop) {
                //오른쪽에서 왼쪽 왼쪽이 오른쪽보다 클 경우
                _this.goToslide(_this.currentIndex + 1);
                _this.paginationActive();
            } else {
                // 마우스가 왼쪽으로 드래그 된 경우
                if(_this.currentIndex < _this.slideCount -3) {
                    _this.goToslide(_this.currentIndex + 1);
                    _this.paginationActive();
                }
            }
        }
    });
}
HyunSlider.prototype.autoPlay = function(){

    if (this.loop) {
        if(this.autoplay){
            const _this = this
            _this.timer = undefined;
    
            clearInterval(_this.timer);
            function autoSlide(){
                if(_this.timer == undefined) {
                    _this.timer = setInterval(function(){
                        _this.goToslide(_this.currentIndex + 1);
                        _this.paginationActive();
                    }, _this.speed * 1000);
                }
            }
            autoSlide();
    
            function stopSlide(){
                clearInterval(_this.timer);
                _this.timer = undefined;
            }
            if(this.palybutton) {
                const newButtonwrap = document.createElement('div');
                newButtonwrap.className = "hyun-play-button";
                this.slideContent.appendChild(newButtonwrap);
            
                newButtonwrap.innerHTML += 
                '<button class="toggle"><span></span></button>';
                const toggleBtn = this.slideContent.querySelector('.toggle');
                
                toggleBtn.classList.add('show')
                toggleBtn.addEventListener("click", () => {
                    toggleBtn.classList.toggle('stop');
                    if (toggleBtn.classList.contains('stop')) {
                        clearInterval(_this.timer);
                        _this.timer = undefined;
                    } else {
                        autoSlide();
                    }
                });
                
                this.slideContent.addEventListener('mouseleave',function(){
                    if (!toggleBtn.classList.contains('stop')) {
                        autoSlide();
                    }
                });
            }
    
            this.slideContent.addEventListener('mouseenter',function(){
                stopSlide();
            });
        }

    } 
}


//옵션
//슬라이드 갯수만큼 html에서 
//<li class="hyun-slider-item"><span>0</span</li>
// 을 생성해주세요.
//loop : 복제
//view : 보여지는 갯수
//width : 슬라이드아이템 크기조절
//margin : 슬라이드 사이간격
//pagination : 페이지네이션 유무
//autoplay : 재생 (전제조건 loop일경우)
//playbutton : 정지,재생 버튼
//speed : 보여지는 속도 조절 (전제조건 loop일경우)


const slider1 = new HyunSlider({
    id: '#slide1',
    loop: true,
    width: 200,
    pagination: true,
    autoplay: true,
    palybutton: false,
    margin: 10,
    view: 3,
    speed: 1,
})
const slider2 = new HyunSlider({
    id: '#slide2',
    loop: true,
    width: 300,
    pagination: false,
    autoplay: false,
    palybutton: false,
    margin: 10,
    view: 3,
    speed: 1,
})