class Timetable extends React.Component {

    constructor(props) {
        super(props);
        this.state = {};
    }

    selectTime(sessionInfo) {
        this.props.selectTime(sessionInfo);
    }

    selectExistingBooking(transferData){
        this.props.selectExistingBooking(transferData);
    }

    cellMouseOver(e){
       
    }

    cellMouseOut(e){

    }

    resizeTable() {

        var container = $("#bookingTimetable");
        var widthChangeObjects = container.find(".timetable .col-header-container, .timetable .table-data-container");
        var heightChangeObjects = container.find(".timetable .row-header-container, .timetable .table-data-container");
        var colHeaderSpans = container.find(".timetable .col-header span");
        var colHeaderChangeObjects = container.find(".timetable .col-header, .timetable .table-data");
        var allSpans = container.find(".row-data-cell, .col-header span");
        var tableDataContainer = container.find(".table-data-container");

        widthChangeObjects.width($(window).width() - 60);
        heightChangeObjects.height($(window).height() - 150);

        var spanWidth = (tableDataContainer.width() / colHeaderSpans.length) - 16;

        if(spanWidth < 120){
            spanWidth = 120;
        }
        allSpans.width(spanWidth);
        colHeaderChangeObjects.width((spanWidth +16) * colHeaderSpans.length);

        container.find(".group-info").each(function(){
            $(this).css({left: ($(this).attr("dataspaceindex") * (spanWidth + 12)) + 3, top: ($(this).attr("datagroupstartindex") * 25) + 3, width: spanWidth + 2, height: (25 * $(this).attr("datagroupsessioncount")) - 8});
        })

    }

    componentDidUpdate(){

        var _this = this;
        this.resizeTable();

        $(window).resize(function(){
            _this.resizeTable();
        });
    }

    componentDidMount() {
        var container = $("#bookingTimetable");

        container.find(".timetable .table-data-container").scroll(function(){
            container.find(".timetable .col-header").css({ 'marginLeft' : ( - $(this).scrollLeft())});
            container.find(".timetable .row-header").css({ 'marginTop' : ( - $(this).scrollTop())});
        })

    }

    render() {

        var groupSessions = [];
        var spaceSessions = [];
        var _this = this;

        $.each(this.props.spaces,function(spaceIndex, space){
            var singleSpaceSessions = [];
            var group = '';
            var groupStartIndex;
            var groupSessionCount = 0;

            $.each(_this.props.timespans, function(timespanIndex, timespan){

                $.each(_this.props.minutesPerSession, function(sessionIndex, minutes){

                    var bookingSessionData = _this.props.bookingData[space];
                    var time = timespan.split(':')[0] + ':' + minutes;
                    var untilTime = '';

                    if(sessionIndex + 1 < _this.props.minutesPerSession.length){
                        untilTime = timespan.split(':')[0] + ':' + _this.props.minutesPerSession[sessionIndex + 1];
                    }else{
                        if(timespanIndex + 1 < _this.props.timespans.length){
                            untilTime = _this.props.timespans[timespanIndex + 1];
                        }else{
                            untilTime = _this.props.timespans[0];
                        }
                    }

                    $.each(bookingSessionData, function(i, d){
                        if(d.time == time){

                            if(_this.props.forbidSessions != null) {
                                for(var j = 0; j < _this.props.forbidSessions[space].length; j++) {

                                    if(timespanIndex * _this.props.minutesPerSession.length + sessionIndex >= _this.props.forbidSessions[space][j].session_from &&
                                        timespanIndex * _this.props.minutesPerSession.length + sessionIndex <= _this.props.forbidSessions[space][j].session_to){
                                        d.available = false;
                                        break;
                                    }
                                }
                            }

                            if(d.available){

                                if(_this.props.selectedSpace == space && _this.props.selectedFromTime != ''){

                                    if(_this.props.selectedToTime != ''){

                                        if(time >= _this.props.selectedFromTime && time <= _this.props.selectedToTime){
                                            singleSpaceSessions.push(<div className="row-data-cell selected" id={'session' + spaceIndex + time.replace(':','')} untiltime={untilTime} onClick={(e1, e2) => _this.selectTime(time + ',' + untilTime + ',' +space)}></div>);
                                        }else{
                                            singleSpaceSessions.push(<div className="row-data-cell available-cell" id={'session' + spaceIndex + time.replace(':','')} untiltime={untilTime} onMouseOver={(e) => _this.cellMouseOver(e)} onMouseOut={(e) => _this.cellMouseOut(e)} onClick={(e1, e2) => _this.selectTime(time + ',' + untilTime + ',' +space)}></div>);
                                        }

                                    }else{

                                        if(time == _this.props.selectedFromTime){
                                            singleSpaceSessions.push(<div className="row-data-cell selected" id={'session' + spaceIndex + time.replace(':','')} untiltime={untilTime} onClick={(e1, e2) => _this.selectTime(time + ',' + untilTime + ',' +space)}></div>);
                                        }else{
                                            singleSpaceSessions.push(<div className="row-data-cell available-cell" id={'session' + spaceIndex + time.replace(':','')} untiltime={untilTime} onMouseOver={(e) => _this.cellMouseOver(e)} onMouseOut={(e) => _this.cellMouseOut(e)} onClick={(e1, e2) => _this.selectTime(time + ',' + untilTime + ',' +space)}></div>);
                                        }

                                    }
                                }else{
                                    singleSpaceSessions.push(<div className="row-data-cell available-cell" id={'session' + spaceIndex + time.replace(':','')} untiltime={untilTime} onMouseOver={(e) => _this.cellMouseOver(e)} onMouseOut={(e) => _this.cellMouseOut(e)} onClick={(e1, e2) => _this.selectTime(time + ',' + untilTime + ',' +space)}></div>);
                                }

                            }else{

                                var transferData = { 'time': group, 'space': space, 'toTime': time, 'toTimeDisplay': untilTime, 'notes': d.notes, 'booking_id': d.booking_id};

                                singleSpaceSessions.push(<div className="row-data-cell" id={'session' + spaceIndex + time.replace(':','')} untiltime={untilTime} ></div>);

                                if(group==''){
                                     //start group session
                                     groupSessionCount = 1;
                                     group = d.groupByTime;
                                     groupStartIndex = i;
                                 }else{

                                    var notes = d.notes.split('\n').map((n) => (
                                        <div>{n}</div>
                                    ));

                                     if(i + 1 < bookingSessionData.length){

                                         if(bookingSessionData[i + 1].groupByTime==group){
                                             groupSessionCount++;
                                         }else{
                                             //end group session
                                             groupSessionCount++;

                                             if(d.owned){
                                                 groupSessions.push(<div dataSpaceIndex={spaceIndex} dataGroupStartIndex={groupStartIndex} dataGroupSessionCount={groupSessionCount} className="group-info owned" onClick={(e) => _this.selectExistingBooking(transferData)} style={{left: (spaceIndex * 120) + 3, top: (groupStartIndex * 25) + 3, width: 114, height: (25 * groupSessionCount) - 6}}><div className="user">{d.user}</div>{notes}</div>);
                                             }else{
                                                 groupSessions.push(<div dataSpaceIndex={spaceIndex} dataGroupStartIndex={groupStartIndex} dataGroupSessionCount={groupSessionCount} className="group-info" style={{left: (spaceIndex * 120) + 3, top: (groupStartIndex * 25) + 3, width: 114, height: (25 * groupSessionCount) - 6}}><div className="user">{d.user}</div>{notes}</div>);
                                             }

                                             group = '';
                                             groupSessionCount = 0;
                                         }
                                     }else{

                                         //end group session
                                         groupSessionCount++;

                                         if(d.owned){
                                             groupSessions.push(<div dataSpaceIndex={spaceIndex} dataGroupStartIndex={groupStartIndex} dataGroupSessionCount={groupSessionCount} className="group-info owned" onClick={(e) => _this.selectExistingBooking(transferData)} style={{left: (spaceIndex * 120) + 3, top: (groupStartIndex * 25) + 3, width: 114, height: (25 * groupSessionCount) - 6}}><div className="user">{d.user}</div>{notes}</div>);
                                         }else{
                                             groupSessions.push(<div dataSpaceIndex={spaceIndex} dataGroupStartIndex={groupStartIndex} dataGroupSessionCount={groupSessionCount} className="group-info" style={{left: (spaceIndex * 120) + 3, top: (groupStartIndex * 25) + 3, width: 114, height: (25 * groupSessionCount) - 6}}><div className="user">{d.user}</div>{notes}</div>);
                                         }

                                         group = '';
                                         groupSessionCount = 0;
                                     }
                                 }
                            }
                        }

                    })

                })
            })

            spaceSessions.push(<div className="col-data">{singleSpaceSessions}</div>);
        })

        const colHeaders = this.props.spaces.map((space) => (
            <span>{space}</span>
        ));

        const rowHeaders = this.props.timespans.map((timespan) => (
            <div>{timespan}</div>
        ));

        return (
            <div className="timetable-base-container">
                <table className="table table-bordered timetable">
                    <tr>
                        <td className="first-col"><div className="clock"><i className="fa fa-clock-o"></i></div></td>
                        <td>
                            <div className="col-header-container">
                                <div className="col-header">
                                    {colHeaders}
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div className="row-header-container">
                                <div className="row-header">
                                {rowHeaders}
                                </div>
                            </div>
                        </td>
                        <td>
                            <div className="table-data-container">
                                <div className="table-data">
                                    {groupSessions}
                                    {spaceSessions}
                                </div>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>);
    }
}