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

import SelectOne from '../selectone/Selectone';
import TodoInputBox from '../todoinputbox/Todoinputbox';
import './Contentlist.less';

class ContentList extends React.PureComponent {
    static propTypes = {
        todos: PropTypes.arrayOf(
            PropTypes.shape({
                id: PropTypes.string,
                name: PropTypes.string,
                deadLineTime: PropTypes.object,
                priority: PropTypes.shape({
                    name: PropTypes.string,
                    color: PropTypes.string,
                    id: PropTypes.string,
                }),
                types: PropTypes.shape({
                    name: PropTypes.string,
                    color: PropTypes.string,
                    id: PropTypes.string,
                }),
                status: 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,
        editingId: PropTypes.string,
        editingName: PropTypes.string,
        editingDeadTime: PropTypes.object,
        editingPid: PropTypes.string,
        editingTid: PropTypes.string,

        handleClickEdit: PropTypes.func,
        handleInputName: PropTypes.func,
        handleInputDeadTime: PropTypes.func,
        handleChangEditingPid: PropTypes.func,
        handleChangEditingTid: PropTypes.func,
        onCancel: PropTypes.func,
    };

    render() {
        console.log('render contentlist');
        const {
            todos,
            saveEditTodo,
            setTodoFinish,
            setTodoPriority,
            setTodoTypes,
            delTodo,
            typesList,
            priorityList,
            editingId,
            editingName,
            editingDeadTime,
            editingPid,
            editingTid,
            handleClickEdit,
            handleInputName,
            handleInputDeadTime,
            handleChangEditingPid,
            handleChangEditingTid,
            onCancel,
        } = this.props;
        return (
            <div>
                {todos.map(todo => {
                    const {
                        id,
                        name,
                        deadLineTime,
                        priority,
                        types,
                        status,
                    } = todo;
                    const { id: pid, color: pcolor } = priority;
                    const { id: tid, name: tname, color: tcolor } = types;
                    return (
                        <div key={id}>
                            <span
                                style={{
                                    color: pcolor,
                                }}
                                className="todolist__todoItemStatus"
                                onClick={() => setTodoFinish(id)}
                            >
                                ●
                            </span>
                            <span className="todolist__todoItemName">
                                {name}
                            </span>
                            <span className="todolist__todoItemDate">
                                {deadLineTime.format('M月D日')}
                            </span>
                            <span
                                className="todolist__todoItemTypeName"
                                style={{
                                    color: tcolor,
                                }}
                            >
                                {tname}
                            </span>
                            {editingId !== id && (
                                <span>
                                    <span
                                        onClick={handleClickEdit.bind(
                                            this,
                                            id,
                                            name,
                                            deadLineTime,
                                            pid,
                                            tid,
                                        )}
                                    >
                                        编辑
                                    </span>
                                    <span
                                        onClick={() =>
                                            window.confirm(
                                                `是否删除${name}?`,
                                            ) && delTodo(id)
                                        }
                                    >
                                        删除
                                    </span>
                                    <SelectOne
                                        list={priorityList}
                                        curId={pid}
                                        onChange={selectedPid =>
                                            setTodoPriority(id, selectedPid)
                                        }
                                        label="优先级"
                                    />
                                    <SelectOne
                                        list={typesList}
                                        curId={tid}
                                        onChange={selectedTid =>
                                            setTodoTypes(id, selectedTid)
                                        }
                                        label="类别"
                                    />
                                </span>
                            )}
                            {editingId === id && (
                                <TodoInputBox
                                    priorityList={priorityList}
                                    typesList={typesList}
                                    handleInputName={handleInputName}
                                    handleInputDeadTime={handleInputDeadTime}
                                    handleChangEditingPid={
                                        handleChangEditingPid
                                    }
                                    handleChangEditingTid={
                                        handleChangEditingTid
                                    }
                                    editingName={editingName}
                                    editingDeadTime={editingDeadTime}
                                    editingPid={editingPid}
                                    editingTid={editingTid}
                                    onSave={({
                                        name,
                                        deadLineTime,
                                        priorityId,
                                        typesId,
                                    }) => {
                                        saveEditTodo({
                                            id,
                                            name,
                                            deadLineTime,
                                            priorityId,
                                            typesId,
                                            status,
                                        });
                                    }}
                                    onCancel={onCancel}
                                    saveText="保存"
                                />
                            )}
                        </div>
                    );
                })}
            </div>
        );
    }
}
export default ContentList;