import React from 'react';
import './style/index';
import { Popup } from 'cbkfe-ui';
import { isArray } from 'cbkfe-utils';

/**
 * @param {string} className
 * @param {string} content  提示框文案
 * @param {string} customContent  自定义内容
 * @param {string} leftButtonName  左边按钮名称
 * @param {string} rightButtonName  右边按钮名称
 * @param {boolean} isArcButton  按钮是圆弧还是矩形 true为圆弧 false为矩形
 * @param {number} changeIndex  如果文案有“##demo##”格式，指定第几个特殊处理颜色
 * @param {string} changeIndexColor  颜色色号，与changeIndex配合使用
 * @param {boolean} isContextCenter  文案是否居中 true为居中，false为左对齐
 * @param {string} imageUrl  顶部图片链接
 * @param {function}  onCanal 左边按钮方法
 * @param {function}  onSure 右边按钮方法
 * @param {boolean}  isSingleButton true表示单个只有单个按钮，false有两个按钮
 * @param {string} singleButtonName 单个按钮的按钮名称
 * @param {function} onSingle 展示单个按钮时的方法
 * @param {boolean} showClose true 展示底部close按钮，false为不展示
 * @param {function} onClose close按钮的方法
 * @param { function } onBackClick 背景点击事件
 */

export default function TipsPopup({
    className = '',
    showTipPopup,
    content = '',
    customContent = '',
    leftButtonName = '取消',
    rightButtonName = '确定',
    isArcButton = true,
    changeIndex = 0,
    changeIndexColor = '#FF2244',
    isContextCenter = true,
    imageUrl = 'https://static.caibeike.com/i/56aa3a48225b1b306aae1a992951e481-4TSzJI-fAMwfAMhp1',
    onCanal,
    onSure,
    isSingleButton = false,
    singleButtonName = '确定',
    onSingle,
    showClose = false,
    onClose,
    onBackClick
}) {
    const dealContent = content.split('##');
    return (
        <Popup
            show={showTipPopup}
            contentClass={`popup-context ${className}`}
            type="middle"
            onBackClick={onBackClick}
        >
            <div>
                <img className="image-tips" src={imageUrl} />

                {customContent ? (
                    customContent
                ) : (
                    <div className={`content-title content-title-${isContextCenter ? 'normal' : 'start'}`}>
                        {isArray(dealContent, true) && dealContent.map((contentItem, index) =>
                            <span style={{ color: `${index === changeIndex - 1 ? changeIndexColor : ''}` }} key={index}> {contentItem}</span>
                        )}
                    </div>
                )}

                {isSingleButton ?
                    <div className="popup-button-layout">
                        <div role="button" className={`button__alone button-alone-${isArcButton ? 'arc' : 'normal'}`} onClick={onSingle} >{singleButtonName}</div>
                    </div>
                    :
                    <div className="popup-button-layout">
                        <div role="button" className={`button-canal button-canal-${isArcButton ? 'arc' : 'normal'}`} onClick={onCanal}>{leftButtonName}</div>
                        <div role="button" className={`button-sure button-sure-${isArcButton ? 'arc' : 'normal'}`} onClick={onSure} >{rightButtonName}</div>
                    </div>
                }

                {showClose && <img onClick={onClose} className="popup__close" src="https://static.caibeike.com/i/f90f35d3b6dab2f996479c85e5424943-bSfAOj-bAMwbAMhp1" />}
            </div>
        </Popup>);
}