import React from "react";
import { Tooltip, Icon } from 'antd';
import { TooltipProps } from 'antd/lib/tooltip'
import * as Tools from 'jad-tool';
import classNames from 'classnames';
import { Iconfont } from '../Iconfont/Iconfont'

// 超出长度补充 Tooltip（不剪裁，超出省略由外部css样式自定义）
export function RenderToolTip(text: string, limit = 10, tipProps?: { placement?: any, [propName: string]: any } | TooltipProps) {
    if (!text || text == '-' || text.length <= limit) return text;
    const { placement } = tipProps || { placement: 'top' }
    return <Tooltip title={text} placement={placement}> {text} </Tooltip>
}

//超出长度补充 Tooltip（剪裁）
export function overstepToTooltip(text: string, limit = 15, tipProps?: { placement?: any, [propName: string]: any } | TooltipProps) {
	if (!text || text.length <= limit) return text;
	if (!Tools.isString(text)) text = Tools.toString(text);
    const { placement } = tipProps || { placement: 'top' }
	return <Tooltip title={text} placement={placement}>
		{text.substring(0, limit) + '...'}
	</Tooltip>
}

// 入参为数组字符串类型，超出长度补充 Tooltip（剪裁）
export function arrayOverstepToTooltip(arr: string[], limit = 15, tipProps?: { placement?: any, [propName: string]: any } | TooltipProps) {
    const arrText = arr.join(', ')
    if (arrText.length <= limit) return arrText;
    const text = arr.slice(0, arr.length - 1).map(item => <><div>{item}</div><br /></>).concat(<div>{arr[arr.length - 1]}</div>) //此处不用p标签是因为最后会多一个空行
    const { placement } = tipProps || { placement: 'top' }
    return <Tooltip title={text} placement={placement}>
        {arrText.substring(0, limit) + '...'}
    </Tooltip>
}

type TipsType = {
    context?: string | number,
    style?: Object,
    className?: string,
    iconColor?: '' | 'info' | 'success' | 'warn' | 'error',
    [propName: string]: any
};
export function Tips({ context = "", style = {}, className = '', iconColor, children }: TipsType) {
    return (<div style={style} className={classNames('jad-hint-tip', iconColor, className)}>
        <Iconfont type="icon-icon-tips" />
        <span className={'jad-hint-content'}>{context || children}</span>
    </div>)
}

export function WrarnTips({ context = "", style = {}, className = '', iconColor, children }: TipsType) {
    return <div style={style} className={classNames('jad-hint-tip-warn', iconColor, className)}>
        <Icon type="exclamation-circle" theme="filled" />
        <span className={'jad-hint-content'}>{context || children}</span>
    </div>
} 