/* eslint-disable react/no-unused-prop-types */
import React from 'react';
import DayPicker, { DateUtils } from 'react-day-picker';
import 'react-day-picker/lib/style.css';
import Hammer from 'hammerjs';

class MultipleDayPicker extends React.Component {
    constructor(props) {
        super(props);

        this.handleDayClick = this.handleDayClick.bind(this);
        this.state = {
            selectedDays: [],
        };
    }

    componentDidMount() {
        this.enableSwipe();
    }

    enableSwipe() {
        console.log(this);

        const HammerCard = new Hammer(this.refs.MultipleDatePicker, {});

        HammerCard.on('swipe', (event) => {
            console.log('SwipeEvent', event);
        });

        HammerCard.get('swipe').set({
            enable: true,
            direction: Hammer.DIRECTION_HORIZONTAL
        });
    }

    handleDayClick(day, { selected }) {
        const { selectedDays } = this.state;
        if (selected) {
            const selectedIndex = selectedDays.findIndex(selectedDay =>
                DateUtils.isSameDay(selectedDay, day)
            );
            selectedDays.splice(selectedIndex, 1);
        } else {
            selectedDays.push(day);
        }
        this.setState({ selectedDays });
    }

    render() {
        return (
            <div id="multiple-day-picker-wrapper" ref="MultipleDatePicker">
                <DayPicker
                    selectedDays={this.state.selectedDays}
                    onDayClick={this.handleDayClick}
                />
            </div>
        );
    }
}
export default MultipleDayPicker;