import React from "react";
import useTooltip from "./Tooltip.behaviour";
import TooltipSkeleton from "./Tooltip.skeleton";
import componentGroups from "../../docs-utils/componentGroups";
import componentCategories from "../../docs-utils/componentCategories";
import tooltipPropTypes, {
    defaultProps,
    propsDescription
} from "./Tooltip.propTypes";
import constantProps from "./Tooltip.constantProps";
import isTouchDevice from '../../utils/isTouchDevice';
import { DATA_TITLE_ATTR, DATA_TITLE_ISHTML } from "./Tooltip.constants";
export default function Tooltip(props) {
    let _touchDevice = isTouchDevice();
    if (_touchDevice) {
        return null;
    }

    let { container = document, arrow, placement, offsetOption } = props;
    let { title, isHtmlTitle, floating, x, y, position,
        arrowReference, arrowX, arrowY, arrowPlacement, classNameObject } = useTooltip({ container, placement, offsetOption });

    return <TooltipSkeleton title={title} position={position}
        x={x} y={y} arrow={arrow} arrowX={arrowX}
        arrowY={arrowY} arrowPlacement={arrowPlacement} isHtmlTitle={isHtmlTitle}
        floatingReference={floating} arrowReference={arrowReference} classNameObject={classNameObject} />
}
Tooltip.getTitleProps = (title, ishtml = false) => {
    return {
        [DATA_TITLE_ATTR]: title,
        [DATA_TITLE_ISHTML]: ishtml
    }
}
Tooltip.propTypes = tooltipPropTypes;
Tooltip.defaultProps = defaultProps;
Tooltip.propsDescription = propsDescription;
Tooltip.constantProps = constantProps;

if (__DOCS__) {
    Tooltip.docs = {
        componentGroup: componentGroups.Atom,
        folderName: componentCategories.General
    };
}


