import React from 'react';
import getCompliedCustomId from '../../utils/getCompliedCustomId';
import { skeletonPropTypes, skeletonDefaultProps } from './Tooltip.propTypes'
import style from './Tooltip.module.css'
import getCompliedClassName from "../../utils/getCompliedClassName";
/*title attribute data should be security applied data*/
export default function TooltipSkeleton(props) {
    let { title, floatingReference, x, y, position, arrow,
        arrowX, arrowY, arrowReference, arrowPlacement, isHtmlTitle, customClassName } = props;

    /* automation props start*/
    let { customId, customIdPrefix, customIdSuffix } = props;
    let automationProps = { customId, customIdPrefix, customIdSuffix };
    /* automation props end */

    let className = getCompliedClassName(
        customClassName,
        {
            [style.tooltipContainer]: true,
            [style.show]: title != null
        },
        {
            [customClassName.show]: !!customClassName
        }
    );
    let tooltipMessageClassName = getCompliedClassName(customClassName, {
        [style.tooltipMessage]: true
    }, {
        [customClassName.tooltipMessage]: !!customClassName
    })

    return (<div role="tooltip" className={className} ref={floatingReference} style={{
        position: position,
        top: y || '',
        left: x || ''
    }} data-id={getCompliedCustomId(automationProps, customId.tooltip)}>
        {
            arrow && <span className={style.arrow} ref={arrowReference}
                style={{
                    top: arrowY || '',
                    left: arrowX || '',
                    [arrowPlacement]: '-4px' /* need to hanlde css variable - half size of arrow will be given here*/
                }}></span>
        }
        {isHtmlTitle ? <div className={tooltipMessageClassName} dangerouslySetInnerHTML={{ __html: title }}></div> : <div className={tooltipMessageClassName}>{title}</div>
        }


    </div >)
}
TooltipSkeleton.propTypes = skeletonPropTypes;
TooltipSkeleton.defaultProps = skeletonDefaultProps