import preact, { h, Component } from 'preact'; // eslint-disable-line no-unused-vars

import Swiper from './vendor/swiper';

import Figure from './figure';

// https://github.com/developit/preact/issues/768
// https://github.com/kidjp85/react-id-swiper/blob/master/src/ReactIdSwiper.js
export default class SwiperGallery extends Component {

    constructor() {
        super();

        this.initialize = (ref) => {
            this.container = ref;
        }
    }

    componentDidMount() {
        this.swiper = new Swiper(this.container, {
            loop: true,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            pagination: {
                el: '.swiper-pagination',
            },
        });
    }

    componentWillUnmount() {
        if (typeof this.swiper !== 'undefined') {
            this.swiper.destroy(true, true);
        }

        delete this.swiper;
    }

    render(props) {
        const page = props.page || {},
              images = page.images || [];

        return (
            <div class="swiper-container o-figure--inner" ref={ref => this.initialize(ref)}>
                <div class="swiper-wrapper">
                    {images.map(img => {
                        return (
                            <Figure img={img} classCSS='swiper-slide' />
                        );
                    })}
                </div>
                <div class="swiper-button-next" />
                <div class="swiper-button-prev" />
                <div class="swiper-pagination" />
            </div>

        );
    }
}
