import React, { Component } from "react";
import { connect } from "react-redux";

import {
	changeInputValue,
	createPost,
	getPosts,
	resetPostForm,
	removePost,
	showEditForm,
	cancelUpdate,
	update,
	handleChangeEditForm
} from "../actions/remote-todo";

import Input from "../components/input";
import Button from "../components/button/button";
import Loder from "../components/HOC/loader";
import Modal from "../components/modal";

export class RemoteTodo extends Component {
	state = { open: false };

	close = () => this.setState({ open: false });

	open = () => this.setState({ open: true });

	componentDidMount() {
		this.props.getPosts();
	}

	showEditModalForm = id => {
		this.props.showEditForm(id);
		this.open();
	};

	udatePostHandler = () => {
		const { sendDataObject, update } = this.props;
		update(sendDataObject);
		this.close();
	};

	cancelUpdatePostHandler = () => {
		const { cancelUpdate } = this.props;
		cancelUpdate();
		this.close();
	};

	render() {
		const {
			changeInputValue,
			myForm,
			createPost,
			postList,
			resetPostForm,
			sendDataObject,
			removePost,
			isFetching,
			editForm,
			editFormField,
			handleChangeEditForm
		} = this.props;

		return (
			<div
				style={{
					width: "100%",
					padding: 50,
					display: "flex"
				}}>
				<div
					style={{
						width: "20%",
						display: "flex",
						flexDirection: "column"
					}}>
					{myForm.map(el => {
						return (
							<Input
								key={el.id}
								id={el.id}
								value={el.value}
								checked={el.checked}
								type={el.type}
								name={el.name}
								label={el.label}
								onChange={changeInputValue}
							/>
						);
					})}
					<div>
						<Loder flag={isFetching}>
							<Button text="Create Post" onClick={createPost.bind(null, sendDataObject)} />
						</Loder>
						<Button text="RESET" onClick={resetPostForm} />
					</div>
				</div>
				<div className="list">
					{postList.map(el => (
						<div key={el.id} className="list__item">
							<Button text="x" className="list__rm-btn" onClick={removePost.bind(null, el.id)} />
							{el.editable && (
								<Button
									text="edit"
									className="list__edit-btn"
									onClick={this.showEditModalForm.bind(null, el.id)}
								/>
							)}
							<h3>
								{el.firstName} {el.lastName}
							</h3>
							<p>{el.age}</p>
						</div>
					))}
				</div>
				{editForm && (
					<div>
						<div
							style={{
								width: "100%",
								display: "flex",
								flexDirection: "column"
							}}
						/>
					</div>
				)}
				<Modal open={this.state.open} close={this.close}>
					<div>
						{editFormField.map(el => {
							return (
								<Input
									key={el.id}
									id={el.id}
									value={el.value}
									checked={el.checked}
									type={el.type}
									name={el.name}
									label={el.label}
									onChange={handleChangeEditForm}
								/>
							);
						})}
						<div>
							<Loder flag={isFetching}>
								<Button text="Update Post" onClick={this.udatePostHandler} />
							</Loder>
							<Button text="CANCEL" onClick={this.cancelUpdatePostHandler} />
						</div>
					</div>
				</Modal>
			</div>
		);
	}
}

const mapStateToProps = state => {
	return {
		myForm: state.remote_todo.myForm,
		postList: state.remote_todo.postList,
		sendDataObject: state.remote_todo.sendDataObject,
		isFetching: state.remote_todo.isFetching,
		editForm: state.remote_todo.editForm,
		editFormField: state.remote_todo.editFormField
	};
};

export default connect(
	mapStateToProps,
	{
		changeInputValue,
		createPost,
		getPosts,
		resetPostForm,
		removePost,
		showEditForm,
		cancelUpdate,
		handleChangeEditForm,
		update
	}
)(RemoteTodo);