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


class ConfigLabel extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            removeModalTitle: '提示',
            removeLoading: false,
            removeModalVisible: false,
            currentLabel: null,
        };
        this.params = {
            page: 1,
            pageSize: 10,
        };
    }


    componentDidMount() {
        this._fetchLabels();
    }

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

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

    }

    removeLabel(item) {
        let { removeModalTitle } = this.state;
        let _this = this;
        Modal.confirm({
            title: removeModalTitle,
            content: `您确定要删除：${item.path} 标签吗？`,
            onOk() {
                _this.props.setAlitaState({ funcName: 'pLabelDelete', params: item.id })
                    .then(() => {
                        message.info('删除失败！');
                        _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 htmlType="button" icon="edit" type="primary" size="small"
                        onClick={() => this.setState({ currentLabel: item })}/>
                <Button htmlType="button" icon="delete" type="danger" size="small"
                        onClick={this.removeLabel.bind(this, item)}/>
            </div>
        </List.Item>);
    }


    render() {
        const { data: labelList = {}, isFetching } = this.props.findPLabel || {};
        let { records, current, total } = labelList || { total: 0, current: 1, records: [] };

        console.log('params: ', this.params);
        const { currentLabel } = this.state;
        return (<div className="page-label-container">
            <div className="prop-label-header">
                <Button htmlType="button" type="primary" icon="sync" loading={isFetching}
                        onClick={() => {
                            this.params.page = 1;
                            this._fetchLabels();
                        }}/>
                <Button htmlType="button" icon="plus"
                        onClick={() => this.setState({ currentLabel: {} })}/>
                <Input.Search placeholder="输入关键词查询"
                              onSearch={this._handleSearch.bind(this)}
                              className="search-input"/>
            </div>
            <Spin className="spin" spinning={isFetching} size="large"/>
            <List
                dataSource={records}
                bordered
                size="small"
                renderItem={this.renderItem.bind(this)}
            />
            <Pagination defaultCurrent={current}
                        style={{ marginTop: 10, padding: 10, background: 'white' }}
                        onChange={(page, pageSize) => {
                            this.params.page = page;
                            this.params.pageSize = pageSize;
                            this._fetchLabels();
                        }}
                        total={total}
                        pageSize={this.params.pageSize}/>
            <AddLabelForm cancel={() => this.setState({ currentLabel: null })}
                          refresh={this._fetchLabels.bind(this)}
                          visible={!!currentLabel}
                          label={currentLabel}
            />
        </div>);
    }


}

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