import React from 'react';
import EventCell from './EventCell';
import { isSelected } from './utils/selection';
import localizer from './localizer';
import getOffset from 'dom-helpers/query/offset';
import getScrollTop from 'dom-helpers/query/scrollTop';
import getScrollLeft from 'dom-helpers/query/scrollLeft';

class Popup extends React.Component {
    componentDidMount() {
        const { popupOffset = 5 } = this.props,
            { top, left, width, height } = getOffset(this.refs.root),
            viewBottom = window.innerHeight + getScrollTop(window),
            viewRight = window.innerWidth + getScrollLeft(window),
            bottom = top + height,
            right = left;

        //if (bottom > viewBottom || right > viewRight) {
        let topOffset, leftOffset;

        if (bottom > viewBottom) {
            topOffset = bottom - viewBottom + (popupOffset.y || +popupOffset || 0);
        }
        if (right > viewRight) {
            leftOffset = right - viewRight + (popupOffset.x || +popupOffset || 0);
        }
        if (left < 0) {
            leftOffset = -(this.props.position.width * 0.25) | 1;
        }

        this.setState({ topOffset, leftOffset }); //eslint-disable-line
        // }
    }

    render() {
        let { events, selected, eventComponent, ...props } = this.props;

        let { left, width, top, height } = this.props.position,
            topOffset = (this.state || {}).topOffset || 0,
            leftOffset = (this.state || {}).leftOffset || 0;

        let style = {
            top: top - topOffset - height * 0.25,
            left: left - leftOffset - width * 0.25,
            minWidth: width + width / 2
        };

        return (
            <div ref="root" style={style} className="rbc-overlay">
                <div className="rbc-overlay-header">
                    {localizer.format(props.slotStart, props.dayHeaderFormat, props.culture)}
                </div>
                {events.map((event, idx) => (
                    <EventCell
                        key={idx}
                        {...props}
                        event={event}
                        component={eventComponent}
                        selected={isSelected(event, selected)}
                    />
                ))}
            </div>
        );
    }
}

export default Popup;
