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

import formatTimeStr from '../../utils/formatTime';
import ContentList from '../contentlist/Contentlist';
import TodoInputBox from '../todoinputbox/Todoinputbox';
import './TodoContent.less';

class TodoContent extends React.PureComponent {
    static propTypes = {
        defaultAddingPid: PropTypes.string,
        defaultAddingTid: PropTypes.string,
        blockList: PropTypes.arrayOf(
            PropTypes.shape({
                title: PropTypes.string,
                todos: PropTypes.array,
            }),
        ),
        mainTitle: PropTypes.string,
        typesList: PropTypes.arrayOf(
            PropTypes.shape({
                name: PropTypes.string,
                color: PropTypes.string,
                id: PropTypes.string,
            }),
        ),
        priorityList: PropTypes.arrayOf(
            PropTypes.shape({
                name: PropTypes.string,
                color: PropTypes.string,
                id: PropTypes.string,
            }),
        ),
        saveEditTodo: PropTypes.func,
        setTodoFinish: PropTypes.func,
        setTodoPriority: PropTypes.func,
        setTodoTypes: PropTypes.func,
        delTodo: PropTypes.func,
        onSave: PropTypes.func,
    };

    constructor(props) {
        super(props);
        this.state = {
            editingId: '',
            editingName: '',
            editingDeadTime: moment(),
            editingPid: '',
            editingTid: '',
        };
        this.addBoxId = 'addTodo';
    }

    handleClickEdit = (id, name, deadLineTime, editingPid, editingTid) => {
        this.setState({
            editingId: id,
            editingName: name,
            editingDeadTime: deadLineTime,
            editingPid,
            editingTid,
        });
    };

    cancelInputBox = () => {
        this.setState({
            editingId: '',
        });
    };
    handleClickAdd = () => {
        const { defaultAddingPid, defaultAddingTid } = this.props;
        this.setState({
            editingId: this.addBoxId,
            editingName: '',
            editingDeadTime: moment(),
            editingPid: defaultAddingPid,
            editingTid: defaultAddingTid,
        });
    };
    handleInputName = name => {
        this.setState({
            editingName: name,
        });
    };
    handleInputDeadTime = time => {
        const formated = formatTimeStr(time);
        if (formated) {
            this.setState({
                editingDeadTime: formated,
            });
        } else {
            alert('输入时间错误');
        }
    };

    handleChangEditingPid = pid => {
        this.setState({
            editingPid: pid,
        });
    };
    handleChangEditingTid = tid => {
        this.setState({
            editingTid: tid,
        });
    };
    render() {
        const {
            editingId,
            editingName,
            editingDeadTime,
            editingPid,
            editingTid,
        } = this.state;
        const {
            blockList,
            mainTitle,
            typesList,
            priorityList,
            saveEditTodo,
            setTodoFinish,
            setTodoPriority,
            setTodoTypes,
            delTodo,
            onSave,
        } = this.props;
        console.log('render todocontent');
        return (
            <div>
                {mainTitle && <h1>{mainTitle}</h1>}
                {blockList.map((each, index) => {
                    const { title, todos } = each;
                    return (
                        <div key={title + index}>
                            {title && <div>{title}</div>}
                            <ContentList
                                todos={todos}
                                typesList={typesList}
                                priorityList={priorityList}
                                saveEditTodo={saveEditTodo}
                                setTodoFinish={setTodoFinish}
                                setTodoPriority={setTodoPriority}
                                setTodoTypes={setTodoTypes}
                                delTodo={delTodo}
                                handleClickEdit={this.handleClickEdit}
                                handleInputName={this.handleInputName}
                                handleInputDeadTime={this.handleInputDeadTime}
                                handleChangEditingPid={
                                    this.handleChangEditingPid
                                }
                                handleChangEditingTid={
                                    this.handleChangEditingTid
                                }
                                editingId={editingId}
                                editingName={editingName}
                                editingDeadTime={editingDeadTime}
                                editingPid={editingPid}
                                editingTid={editingTid}
                                onCancel={this.cancelInputBox}
                            />
                        </div>
                    );
                })}
                <div>
                    <div onClick={this.handleClickAdd}>+ 添加任务</div>
                    {editingId === this.addBoxId && (
                        <TodoInputBox
                            handleInputName={this.handleInputName}
                            handleInputDeadTime={this.handleInputDeadTime}
                            handleChangEditingPid={this.handleChangEditingPid}
                            handleChangEditingTid={this.handleChangEditingTid}
                            editingId={editingId}
                            editingName={editingName}
                            editingDeadTime={editingDeadTime}
                            editingPid={editingPid}
                            editingTid={editingTid}
                            onCancel={this.cancelInputBox}
                            saveText="添加"
                            priorityList={priorityList}
                            typesList={typesList}
                            onSave={onSave}
                        />
                    )}
                </div>
            </div>
        );
    }
}

export default TodoContent;