import * as React from 'react';
import Avatar, {AvatarProps, Size} from '@beisen-phoenix/avatar';
import Checkbox from '@beisen-phoenix/checkbox'
import utils from '@beisen-phoenix/common-utils';
import HighLight from 'react-highlight-words';
const classes = utils.BEMClass('lookup-list');
import './index.scss'


export interface ItemProps {
    isAvator?: boolean;                 //是否显示头象
    multiple?: boolean;                 //是否多选，默认否
    label?: string;                     //标题
    sublabel?: string;                  //二级标题
    value?: string;                     //值
    avator?: AvatarProps;               //头象
    onClick?: Function;                 //列表点击事件
    isSelected?: boolean;               //是否选中
    searchWord?: string;                //搜索内容
    srcValue: string;                   //列表内容原值
}

export default class Item extends React.Component<ItemProps, any> {
    // 默认配置
    static defaultProps = {
        isAvator: false,
        multiple: false,
        isSelected: false
    };

    constructor(props) {
        super(props);
        this.state={
        }
    }

    renderAvatar = () => {
        const { isAvator, avator } = this.props
        return isAvator ? <div className={classes({element: 'item__avatar'})}>
                            <Avatar {...avator} size={Size.xxsm} />
                        </div>
                      : null
    }

    renderCheckBox = () => {
        const { multiple, isAvator, isSelected } = this.props
        return multiple ? <div className={classes({element: 'item__checkbox', modifiers: {'top': isAvator, 'top2': !isAvator}})}>
                            <Checkbox checked={isSelected} extraCls={classes({element: 'item__checkbox__width'})}/>
                          </div>
                        : null
    }

    renderLabel = () => {
        const { label, sublabel, searchWord } = this.props

        return <div className={classes({element: 'item__content'})}>
            <div className={classes({element: 'item__content__label'})}>
                <HighLight
                    textToHighlight={label || '--'}
                    autoEscape={true}
                    highlightClassName={classes({element: 'item__content__highLightCls'})}
                    searchWords={[searchWord]}
                />
            </div>
            <div className={classes({element: 'item__content__sublabel'})}>{sublabel || '--'}</div>
        </div>
    }

    onClick = (e, isSelected) => {
        const {onClick} = this.props
        if (onClick) {
            onClick(Object.assign(e, {isSelected: !isSelected}))
        }
    }

    render() {
        const avatar = this.renderAvatar()
        const checkbox = this.renderCheckBox()
        const label = this.renderLabel()
        const { isSelected, multiple } = this.props
        const {srcValue} = this.props

        return (
            <div className={classes({element: 'item', modifiers: {'select': !multiple && isSelected}})} onClick={this.onClick.bind(this, srcValue, isSelected)}>
                {checkbox}
                {avatar}
                {label}
            </div>
        )
    }
}