import React from 'react';
import { connectAlita } from 'redux-alita';
import { withRouter } from 'react-router-dom';
import { Button, List, Modal } from 'antd';
import './styles/label.less';
import AddLabelForm from './widget/AddLabelForm';


class ConfigLabel extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            params: { keywords: undefined },
            labelPathList: [],
            addVisible: false,
            loading: false,
            addModalTitle: '添加属性标签',
            removeModalTitle: '提示',
            removeLoading: false,
            removeModalVisible: false,
            currentLabel: null,
        };
    }


    componentDidMount() {
        this._fetchLabels();
    }

    _fetchLabels() {
        let params = this.state.params;
        this.props.setAlitaState({ funcName: 'findPLabel', params });

    }

    _handleSearch(value) {
        this.state.params.keywords = value;
        this._fetchLabels();

    }


    renderItem(item) {
        return (<List.Item className='prop-label-item'>
            <div>
                <h3 className='label-label'>{item.path}</h3>
                <span className={'label-title'}>{item.title}</span>
            </div>
            <div>{item.description}</div>
            <div className='tool-btns'>
                <Button icon='edit' type='primary' size='small' onClick={() => this.setState({ currentLabel: item })}/>
                <Button icon='delete' type='danger' size='small' onClick={this.removeLabel.bind(this, item)}/>
            </div>
        </List.Item>);
    }

    _onAddModalHide() {
        this.setState({ addVisible: false, currentLabel: null });

    }

    render() {
        const { data: labelList = {} ,isFetching} = this.props.findPLabel || {};
        const { currentLabel, loading, addModalTitle } = this.state;
        return (<div>
            <div className='prop-label-header'>
                <Button type='primary' icon='sync' loading={isFetching} onClick={this._fetchLabels.bind(this)}/>
                <Button type='primary' icon='plus' onClick={()=>this.setState({currentLabel:{}})}/>
            </div>

            <List
                dataSource={labelList.records}
                bordered
                size='small'
                renderItem={this.renderItem.bind(this)}/>
            <Modal visible={!!currentLabel} title={addModalTitle}
                   onCancel={this._onAddModalHide.bind(this)}
                   footer={null}>
                <AddLabelForm cancel={this._onAddModalHide.bind(this)}
                              label={currentLabel}/>
            </Modal>
        </div>);
    }

    removeLabel(item) {
        let { removeModalTitle, removeLoading } = this.state;
        let _this = this;
        Modal.confirm({
            title: removeModalTitle,
            content: `您确定要删除：${item.path} 标签吗？`,
            onCancel() {
            },
            onOk() {
                _this.props.setAlitaState({ funcName: 'pLabelDelete', params: item.id });
            },
        });
    }

}

export default withRouter(connectAlita(['findPLabel'])(ConfigLabel));
