import {Link} from "react-router-dom";
import {connect} from "react-redux";
import {useState} from "react";
import {actionChangePass} from "../actions/actionChangePassword";

const ChangePass = ({onChangePass}) => {
	const [log, setLog] 		= useState('')
	const [pass, setPass] 		= useState('')
	const [newPass, setNewPass] = useState('')
	console.log(onChangePass);
	return (
		<>
			<Link to="/">
	        	<button className="float-left btn-secondary d-inline-block mt-2 ml-2">
	          		<span>&#8617;</span>Back to Main Page
	        	</button>
	      	</Link>
	      	<br/>
	      	<br/>
	      	<div className="container">
	      		<div style ={{textAlign: "center" , alignItems:"center", justifyContent:'center'}}>
	      			<p>
	      				<input value={log} placeholder='your login' onChange={(e)=>setLog(e.target.value)}
	      					style={{borderColor: log.length > 0 ? 'green' : 'red'}}/>
	      			</p>
	      			<p>
	      				<input value={pass} placeholder='your old password' 
	      					onChange={e=>setPass(e.target.value)}
	      					style={{borderColor: pass.length > 0 ? 'green' : 'red'}} 
	      				/>
	      			</p>
	      			<p>
	      				<input placeholder='your new password' 
	      					style={{borderColor: pass.length > 0 ? 'green' : 'red'}}
		      				onChange={e=>{
		      					setNewPass(e.target.value)
		      				}} 
		      			/>
	      			</p>
	      			<p>
	      				<button onClick={()=>onChangePass(log, pass, newPass)} 
	      					disabled={(log.length!==0 && pass.length!==0 && newPass!==0)?false:true}>Сменить пароль</button>
	      			</p>
	      		</div>
	      	</div>
	    </>
	)
};

const CChangePass = connect(state=>({}),{onChangePass: actionChangePass})(ChangePass)

export default CChangePass;