import React from 'react';
import PropTypes from 'prop-types';
import { Container, Box } from '../Layout';
import Tooltip from '../Tooltip';
import '../common/basic.module.css';
import '@zohodesk/variables/lib/colorVariables.module.css';
import '@zohodesk/variables/lib/dotVariables.module.css';
import '@zohodesk/variables/lib/sizeVariables.module.css';
import '@zohodesk/variables/lib/fontsizeVariables.module.css';
import '@zohodesk/variables/lib/fontFamilyVariables.module.css';
import '@zohodesk/variables/lib/transitionVariables.module.css';
import '@zohodesk/variables/lib/no_transitionVariables.module.css';
import style from './AppContainer.module.css';
import { getLibraryConfig } from '../Provider/Config';


export default class AppContainer extends React.Component {
    constructor(props) {
        super(props);
        this.setTooltipRef = this.setTooltipRef.bind(this);
        this.handleOver = this.handleOver.bind(this);
        this.mouseOverDispatch = this.mouseOverDispatch.bind(this);
        this.removeTimeout = this.removeTimeout.bind(this);
        this.getContainerRef = this.getContainerRef.bind(this);
        this.timer = null;
        this.tooltipDebounce = getLibraryConfig('tooltipDebounce');
    }

    mouseOverDispatch(e) {
        if (this.tooltipRef) {
            this.tooltipRef.handleOver(e);
        }
    }

    removeTimeout() {
        if (this.timer) {
            this.timer = clearTimeout(this.timer);
        }
    }

    handleOver(e) {
        if (this.timer) {
            this.timer = clearTimeout(this.timer);
        }
        this.timer = setTimeout(() => this.mouseOverDispatch(e), this.tooltipDebounce);
    }

    getContainerRef(ref) {
        let { eleRef } = this.props;
        this.containerElement = ref;
        eleRef && eleRef(ref);
    }

    setTooltipRef(ref) {
        this.tooltipRef = ref;
    }

    componentDidMount() {
        if (this.containerElement) {
            this.containerElement.addEventListener('mouseover', this.handleOver, false);
            this.containerElement.addEventListener('mouseout', this.removeTimeout, false);
        }
    }

    componentWillUnmount() {
        if (this.containerElement) {
            this.containerElement.removeEventListener('mouseover', this.handleOver, false);
            this.containerElement.addEventListener('mouseout', this.removeTimeout, false);
        }
    }

    render() {
        let {
            className,
            children,
            tagName,
            dataId,
            tooltipClass,
            tooltipParentClass,
            customProps
        } = this.props;
        let { ContainerProps = {}, TooltipProps = {}, ExtraProps = {} } = customProps;
        return (
            <React.Fragment>
                <Container
                    className={`${style.container} ${className}`}
                    //onMouseOver={this.handleOver}
                    dataId={dataId}
                    tagName={tagName}
                    eleRef={this.getContainerRef}
                    {...ContainerProps}
                    {...ExtraProps}
                >
                    <Box flexible>{children}</Box>
                </Container>
                <div
                    {...ExtraProps}
                    className={`${style.container} ${style.tooltip} ${tooltipParentClass}`}
                    data-id={`${dataId}_tooltip`}
                >
                    <Tooltip ref={this.setTooltipRef} customClass={tooltipClass} {...TooltipProps} />
                </div>
            </React.Fragment>
        );
    }
}

AppContainer.propTypes = {
    children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]),
    dataId: PropTypes.string,
    eleRef: PropTypes.func,
    tagName: PropTypes.string,
    className: PropTypes.string,
    tooltipClass: PropTypes.string,
    tooltipParentClass: PropTypes.string,
    customProps: PropTypes.shape({
        ContainerProps: PropTypes.object,
        TooltipProps: PropTypes.object,
        ExtraProps: PropTypes.object
    })

};
AppContainer.defaultProps = {
    dataId: 'AppContainer',
    tagName: 'div',
    className: '',
    tooltipClass: '',
    tooltipParentClass: '',
    customProps: {}
};

if (__DOCS__) {
    AppContainer.docs = {
        componentGroup: 'Template',
        folderName: 'Style Guide'
    };
}
