slide

import { create, append } from './util.js';

export default class Slide {
    state = {
        data: [],
        show: [],
        currIdx: -5,
        range: 5,
    }

    constructor($target, data) {
        this.state.data = data;
        this.$target =$target;
        this.$slide = create('div');
        this.$slide.style = "position: relative; display: flex; justify-content: center;"
        this.$slide.onclick = e => this.setShow(e.target.dataset.left, this.state.currIdx);

        append(this.$slide);
        this.setShow(false);

        this.render();
        console.log('SLIDE CREATED', this);
    }

    setState = (nextData) => {
        this.state = nextData;
        this.render();
    }

    setShow = (isLeft) => {
        let { data, show, currIdx, range } = this.state;
        const len = data.length;
        currIdx += len;
        if (isLeft == 1) {
            console.log('>>> ', isLeft);
			for (let i = range - 1; i >= 0; i--) {
                currIdx--;
                show[i] = (currIdx) % len;
			}            
        } else {
            for (let i = 0; i < range; i++) {
                show[i] = (currIdx + range) % len;
                currIdx++;
			}
        }
        
        this.setState({ ...this.state, currIdx: currIdx % len, show});
        console.log(isLeft, this.state.currIdx);
        return show;
    }

    render = () => {
        const dataTempleate = this.state.data.length != 0 && this.state.data.map((n, i) => `
            <div 
                class="slide-item ${this.state.show.indexOf(i) == -1 && "hide"}" 
                style="width: 50px;"
            >${n}</div>
        `).join('');


        const view = `
            <article style="display: flex; align-items: center; justify-content: center;">
                <span class="arrow" data-left="1"> < </span>
                ${dataTempleate}
                <span class="arrow" data-left=""> > </span>
            </article>
        `;
        this.$slide.innerHTML = this.state.data.length == 0 ? '로딩 실패' : `${view}`;
    }
}