import React from 'react';
import { Button, Icon, message } from 'antd';
import { WeaLocaleProvider, WeaDialog, WeaInput, WeaInputSearch } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;
import MaterialLib from './MaterialLib';

class WeaMaterialLib extends React.Component {
    state = { visible: false, value: this.props.value };

    constructor(props) {
        super(props);
        this.getButtons = this.getButtons.bind(this);
        this.onOk = this.onOk.bind(this);
        this.onClear = this.onClear.bind(this);
        this.onCancel = this.onCancel.bind(this);
        this.onShow = this.onShow.bind(this);
        this.onChange = this.onChange.bind(this);
    }

    componentWillReceiveProps(nextProps) {
        this.setState({ value: nextProps.value });
    }

    render() {
        const { type, value, disabled, multiCheck, getTooltipContainer = () => document.body } = this.props;
        const { visible } = this.state;

        let displayComp = <div />;
        if (type == 'button') {
            displayComp = <div onClick={this.onShow}>{this.props.children}</div>;
        } else {
            displayComp = <WeaInputSearch style={{ width: '100%' }} value={value} onSearchChange={this.onChange} onSearch={this.onShow} />;
        }

        if (disabled) {
            displayComp = <WeaInput value={value} disabled={true} />;
        }

        return (
            <div>
                {displayComp}
                <WeaDialog
                  visible={visible}
                  title={getLabel(0, '图片素材库')}
                  icon="icon-coms-portal"
                  iconBgcolor="#1a57a0"
                  style={{ width: top.document.body.clientWidth - 300, height: top.document.body.clientHeight - 200 }}
                  zIndex={1050}
                  buttons={this.getButtons()}
                  onCancel={this.onCancel}
                  layout={getTooltipContainer()}
                >
                    <MaterialLib ref="ml" multiCheck={multiCheck} />
                </WeaDialog>
            </div>
        );
    }

    getButtons() {
        let buttons = [];
        buttons.push(<Button type="primary" onClick={this.onOk}>{getLabel(0, '确定')}</Button>);
        buttons.push(<Button type="primary" onClick={this.onClear}>{getLabel(0, '清除')}</Button>);
        buttons.push(<Button type="ghost" onClick={this.onCancel}>{getLabel(0, '取消')}</Button>);
        return buttons;
    }

    onShow() {
        this.setState({ visible: true });
        this.refs.ml && this.refs.ml.setVisible({ visible: true });
    }

    onOk() {
        const checkedFiles = this.refs.ml.getCheckedFiles();

        if (checkedFiles && checkedFiles.length) {
            const filepaths = checkedFiles.map(item => item.filepath);
            this.onChange(filepaths.join(','));
            this.refs.ml.setVisible(false);
            this.setState({ visible: false });
        } else {
            message.warning(getLabel(0, '请选择！'));
        }
    }

    onClear() {
        this.refs.ml.setVisible(false);
        this.setState({ visible: false, value: '' });
        this.props.onChange('');
    }

    onCancel() {
        this.refs.ml.setVisible(false);
        this.setState({ visible: false });
    }

    onChange(value) {
        this.props.onChange(value);
    }
}

export default WeaMaterialLib;
