import React, { FC, memo, useRef, useState } from 'react';
import { Wrapper }                           from '../../..';
import { cn }                                from '../../util/bem';
import { SizeType }                          from '../../util/global-props';
import {  useAutoPosition }                  from './autoposition.hook';
import './tooltip.component.scss';

export type TooltipPropsType = {
    className?: string;
    children: React.ReactNode;
    message?: React.ReactNode;
    title?: string
    disabled?: boolean;
    timeout?: number;

    manual?: boolean;

    margin?: SizeType;
    menuWidth?: string;
    position?:
        | 'auto-vertical-left'
        | 'auto-vertical-center'
        | 'auto-vertical-right'
        | 'bottom-left'
        | 'bottom-center'
        | 'bottom-right'
        | 'top-left'
        | 'top-center'
        | 'top-right';
    style?: React.CSSProperties;

}

const className = cn('tooltip');

export const Tooltip: FC<TooltipPropsType> = memo((props) => {
    const triggerEl  = useRef(null);
    const dropdownEl = useRef(null);
    const [ open, setOpen ] = useState(false);

    const [ autoPosition ] = useAutoPosition({
        dropdownEl: dropdownEl.current,
        triggerEl:  triggerEl.current,
        openState:  props.manual || open,
        position:   props.position
    });

    const onMouseEnter = () => {
        setOpen(true);
    };
    const onMouseLeave = () => {
        setOpen(false);
    };

    return (
        <div
            className={
                className({
                    disabled: props.disabled,
                    margin:   props.margin
                })
            }
            style={ props.style }
            onMouseEnter={ onMouseEnter }
            onMouseLeave={ onMouseLeave }
        >
            <div
                className={ className('trigger', { disabled: !props.message }) }
                ref={ triggerEl }
            >
                { props.children }
            </div>

            <div
                className={ className(
                    'message',
                    {
                        position: autoPosition || props.position,
                        open
                    }
                ) }
                ref={ dropdownEl }
                style={ props.menuWidth ? { width: props.menuWidth } : { width: 'auto' } }
                onClick={ (e) => e.stopPropagation() }
            >

                { props.message
                        && (
                            <Wrapper
                                className={ className('message-wrapper') }
                                frame="solid-shadow-md"
                                color="white"
                                padding="xs"
                                radius="sm"
                                fullWidth
                                styles={ { padding: '8px' } }
                            >
                                { props.title && <span className={ className('title') }>{ props.title }</span> }
                                { props.message }
                            </Wrapper>
                        ) }

            </div>

        </div>
    );
});

Tooltip.defaultProps = {
    disabled: false,
    position: 'auto-vertical-center',
    timeout:  200
};