import React from 'react';



class GetTest extends React.Component {
    state = {
        arrayTopic: {
            categotyId: null,
            topic: null
        }
    }
    componentWillMount() {
        const { topic: { payload, topics } } = this.props;
        this.setState({ arrayTopic: { categogyId: payload, topic: topics } })
    }


    componentWillUpdate(nextState, nextProps) {
        const { newTopic, deleteTopic, topicId } = nextState;
        const { arrayTopic: { topic } } = nextProps;
        if (newTopic.data !== null) {
            for (let key in topic) {
                if (topic[key]._id == newTopic.data._id) {
                    this.setState(prevState => {
                        const array = prevState.arrayTopic.topic.slice()
                        array.splice(key, 1, newTopic.data)
                        return {
                            arrayTopic: array
                        }
                    })
                    break;
                }
            }

        }
        if (!deleteTopic.isFetching) {
            for (let key in topic) {
                if (topic[key]._id == topicId) {
                    this.setState(prevState => {
                        const array = prevState.arrayTopic.topic.slice()
                        array.splice(key, 1)
                        return {
                            arrayTopic: array
                        }
                    })
                    break;
                }
            }
        }
    }


    render() {
        const { handlers: { openEditModal } } = this.props;
        const { arrayTopic: { topic } } = this.state

        return (

            <div className='slideLeft w-45 p-3 bg-gradient border rounded'  >
                {
                    topic && topic.map(el =>
                        <div className="btn ">
                            <button class="btn btn-secondary font-ci font-ci-bold text-light bg-mist " onClick={openEditModal.bind(null, { el })} type="button" id={el._id} key={el._id} >
                                {el.name}
                            </button>
                        </div>)
                }
            </div>

        )
    }

}


export default GetTest;