import React from 'react';
import { render } from 'react-dom';
import moment from './src/moment-range';
import Dayz from './src/dayz';

require('./demo.scss');

let COUNT = 1;

const workSchedules = [
    {
        userID: 'd777222',
        firstName: 'John',
        lastName: 'Morris',
        countryCode: 'AU',
        state: 'NSW',
        pendingActions: [
            {
                type: 'TASK VALIDATION',
                customerName: 'ACME Pty Ltd',
                taskID: '353432253',
                appointmentID: 'TECAMS3532324',
                userID: 'd777222',
                pendingDate: '2020-01-22T13: 44:55',
            },
        ],
        userAllocations: [
            {
                allocationType: 'TASK',
                appointmentID: 'TECAMS0321531414',
                customerName: 'ACME PtyLtd',
                taskID: '35243225',
                allocationStart: '2020-03-25T07:45:00',
                allocationEnd: '2020-03-25T08:45:00',
                outOfWindowFlag: false,
                createdBy: 'd558866',
            },
        ],
        availabilityWindowEvents: [
            {
                recordDate: '2020-03-25T00:15:00',
                recordType: 'AVAILABLE PERIOD START',
            },
            {
                recordDate: '2020-03-25T02:00:00',
                recordType: 'AVAILABLE PERIOD END',
            },
        ],
    },
    {
        userID: 'd777223',
        firstName: 'David',
        lastName: 'Smith',
        countryCode: 'AU',
        state: 'NSW',
        pendingActions: [
            {
                type: 'TASK VALIDATION',
                customerName: 'ACME Pty Ltd',
                taskID: '353432253',
                appointmentID: 'TECAMS3532324',
                userID: 'd777223',
                pendingDate: '2020-01-22T13: 44:55',
            },
        ],
        userAllocations: [
            {
                allocationType: 'TASK',
                appointmentID: 'TECAMS0321531414',
                customerName: 'ACME PtyLtd',
                taskID: '35243225',
                allocationStart: '2020-03-25T07:45:00',
                allocationEnd: '2020-03-25T08:45:00',
                outOfWindowFlag: false,
                createdBy: 'd558866',
            },
        ],
        availabilityWindowEvents: [
            {
                recordDate: '2020-03-25T00:15:00',
                recordType: 'AVAILABLE PERIOD START',
            },
            {
                recordDate: '2020-03-25T01:00:00',
                recordType: 'AVAILABLE PERIOD END',
            },
        ],
    },
    {
        userID: 'd777224',
        firstName: 'David',
        lastName: 'Warner',
        countryCode: 'AU',
        state: 'NSW',
        pendingActions: [
            {
                type: 'TASK VALIDATION',
                customerName: 'ACME Pty Ltd',
                taskID: '353432253',
                appointmentID: 'TECAMS3532324',
                userID: 'd777224',
                pendingDate: '2020-01-24T13: 44:55',
            },
        ],
        userAllocations: [
            {
                allocationType: 'TASK',
                appointmentID: 'TECAMS0321531414',
                customerName: 'ACME PtyLtd',
                taskID: '35243225',
                allocationStart: '2020-03-25T07:45:00',
                allocationEnd: '2020-03-25T08:45:00',
                outOfWindowFlag: false,
                createdBy: 'd558866',
            },
            {
                allocationType: 'TASK',
                appointmentID: 'TECAMS0321531414',
                customerName: 'ACME PtyLtd',
                taskID: '35243225',
                allocationStart: '2020-03-25T09:45:00',
                allocationEnd: '2020-03-25T10:45:00',
                outOfWindowFlag: false,
                createdBy: 'd558866',
            },
        ],
        availabilityWindowEvents: [
            {
                recordDate: '2020-03-25T03:00:00',
                recordType: 'AVAILABLE PERIOD START',
            },
            {
                recordDate: '2020-03-25T05:00:00',
                recordType: 'AVAILABLE PERIOD END',
            },
        ],
    },
    {
        userID: 'd777225',
        firstName: 'Hame',
        lastName: 'Rock',
        countryCode: 'AU',
        state: 'NSW',
        pendingActions: [
            {
                type: 'TASK VALIDATION',
                customerName: 'ACME Pty Ltd',
                taskID: '353432253',
                appointmentID: 'TECAMS3532324',
                userID: 'd777225',
                pendingDate: '2020-01-24T13: 44:55',
            },
        ],
        userAllocations: [
            {
                allocationType: 'TASK',
                appointmentID: 'TECAMS0321531414',
                customerName: 'ACME PtyLtd',
                taskID: '35243225',
                allocationStart: '2020-03-25T16:00:00',
                allocationEnd: '2020-03-25T18:45:00',
                outOfWindowFlag: false,
                createdBy: 'd558866',
            },
        ],
        availabilityWindowEvents: [
            {
                recordDate: '2020-03-25T00:15:00',
                recordType: 'AVAILABLE PERIOD START',
            },
            {
                recordDate: '2020-03-25T01:00:00',
                recordType: 'AVAILABLE PERIOD END',
            },
        ],
    },
];

class DayzTestComponent extends React.Component {

    constructor(props) {
        super(props);
        this.addEvent = this.addEvent.bind(this);
        this.onEventClick = this.onEventClick.bind(this);
        this.editComponent = this.editComponent.bind(this);
        this.changeDisplay = this.changeDisplay.bind(this);
        this.onEventResize = this.onEventResize.bind(this);
        const date = moment();
        this.state = {
            date,
            events: new Dayz.EventsCollection(this.formatEvents(workSchedules)),
            daynumber: 3,
            display: 'week',
        };
    }

    formatEvents(data) {
        const events = [];
        for (let i = 0; i < data.length; i++) {
            for (let j = 0; j < data[i].userAllocations.length; j++) {
                const userAllocation = data[i].userAllocations[j];
                const event = {
                    userId: data[i].userID,
                    content: userAllocation.customerName,
                    eventId: userAllocation.appointmentID,
                    // onViewEventDetail: () => history.push(`/action-detail/${userAllocation.appointmentID}`),
                    taskID: userAllocation.taskID,
                    allocationStart: moment(userAllocation.allocationStart).format('DD-MM-YYYY hh:mm A'),
                    allocationEnd: moment(userAllocation.allocationEnd).format('DD-MM-YYYY hh:mm A'),
                    range: moment.range(moment(userAllocation.allocationStart), moment(userAllocation.allocationEnd)),
                };
                if (userAllocation.outOfWindowFlag) {
                    event.type = 'outside';
                }
                events.push(event);
            }

            if (data[i].availabilityWindowEvents && data[i].availabilityWindowEvents.length > 0) {
                for (let j = 0; j < data[i].availabilityWindowEvents.length; j += 2) {
                    const startTime = data[i].availabilityWindowEvents[j].recordDate;
                    const endTime = data[i].availabilityWindowEvents[j + 1].recordDate;
                    const event = {
                        userId: data[i].userID,
                        content: '',
                        range: moment.range(moment(startTime), moment(endTime)),
                        type: 'window',
                    };
                    events.push(event);
                }
            }
        }

        return events;
    }

    changeDisplay(ev) {
        this.setState({ display: ev.target.value });
    }

    onEventClick(ev, event) {
        event.set({ editing: !event.isEditing() });
    }

    onEventResize(ev, event) {
        const start = event.start.format('hh:mma');
        const end   = event.end.format('hh:mma');
        event.set({ content: `${start} - ${end} (resizable)` });
    }

    addEvent(ev, date) {
        this.state.events.add({
            content: `Event ${COUNT++}`,
            resizable: true,
            range: moment.range(date.clone(), date.clone().add(1, 'hour').add(45, 'minutes')),
        });
    }

    editComponent(props) {
        const onBlur   = function() { props.event.set({ editing: false }); };
        const onChange = function(ev) { props.event.set({ content: ev.target.value }); };
        const onDelete = function() { props.event.remove(); };
        return (
            <div className="edit">
                <input
                    type="text" autoFocus
                    value={props.event.content}
                    onChange={onChange}
                    onBlur={onBlur}
                />
                <button onClick={onDelete}>X</button>
            </div>
        );
    }

    render() {
        console.log('jinglis', this.state.events);
        return (
            <div className="dayz-test-wrapper">

                <div className="tools">
                    <label>
                        Month: <input type="radio"
                            name="style" value="month" onChange={this.changeDisplay}
                            checked={'month' === this.state.display} />
                    </label><label>
                        Week: <input type="radio"
                            name="style" value="week" onChange={this.changeDisplay}
                            checked={'week' === this.state.display} />
                    </label><label>
                        Day: <input type="radio"
                            name="style" value="day" onChange={this.changeDisplay}
                            checked={'day' === this.state.display} />
                    </label>
                </div>

                <Dayz {...this.state}
                    displayHours={[0, 23]}
                    onEventResize={this.onEventResize}
                    editComponent={this.editComponent}
                    onDayDoubleClick={this.addEvent}
                    onEventClick={this.onEventClick}
                >
                </Dayz>
            </div>
        );
    }

}


const div = document.createElement('div');
document.body.appendChild(div);
render(React.createElement(DayzTestComponent, {}), div);