import React from 'react';
import PropTypes from 'prop-types';

import SelectOne from '../selectone/Selectone';
import './Todoinputbox.less';

class TodoInputBox extends React.PureComponent {
    static propTypes = {
        handleInputName: PropTypes.func,
        handleInputDeadTime: PropTypes.func,
        handleChangEditingPid: PropTypes.func,
        handleChangEditingTid: PropTypes.func,
        editingName: PropTypes.string,
        editingDeadTime: PropTypes.object,
        editingPid: PropTypes.string,
        editingTid: PropTypes.string,
        onSave: PropTypes.func,
        onCancel: PropTypes.func,
        saveText: PropTypes.string,
        priorityList: PropTypes.array,
        typesList: PropTypes.array,
    };

    handleClickSaveButton = () => {
        const {
            editingName,
            editingDeadTime,
            editingPid,
            editingTid,
            onSave,
            onCancel,
        } = this.props;
        onSave({
            name: editingName,
            deadLineTime: editingDeadTime,
            priorityId: editingPid,
            typesId: editingTid,
        });
        onCancel();
    };
    render() {
        const {
            handleInputName,
            handleInputDeadTime,
            handleChangEditingPid,
            handleChangEditingTid,
            editingName,
            editingDeadTime,
            editingPid,
            editingTid,
            saveText,
            priorityList,
            typesList,
            onCancel,
        } = this.props;
        return (
            <div>
                <div>
                    <input
                        type="text"
                        placeholder="名称"
                        onChange={e => handleInputName(e.target.value)}
                        value={editingName}
                    />
                    <input
                        type="text"
                        placeholder="过期时间"
                        onChange={e => handleInputDeadTime(e.target.value)}
                        value={editingDeadTime.format('M月D日')}
                    />
                    <SelectOne
                        list={priorityList}
                        curId={editingPid}
                        onChange={handleChangEditingPid}
                        label="优先级"
                    />
                    <SelectOne
                        list={typesList}
                        curId={editingTid}
                        onChange={handleChangEditingTid}
                        label="类别"
                    />
                </div>
                <div>
                    <button onClick={this.handleClickSaveButton}>
                        {saveText}
                    </button>
                    <span onClick={onCancel}>取消</span>
                </div>
            </div>
        );
    }
}
export default TodoInputBox;