import React from "react";

import { connect } from 'react-redux';

import { withRouter } from "react-router-dom";
import { compose } from "redux";
import AuthService from '../services/AuthService';
import * as authAction from '../actions/auth';
// import ToastService from '../services/ToastService';

const required = (value, name) => {

if (!name.value) {
return (
<div className="isaerror" role="alert">
Please enter your {name.name}
</div>
);
}
};

class Login extends React.Component {

constructor(props) {
super(props);
window.scrollTo(0, 0);
this.error = false;
this.handleLogin = this.handleLogin.bind(this);

this.state = {
username: '', password: ''
};
}

componentWillMount = () => { };

handleLogin = (e) => {

e.preventDefault();
// this.form.validateAll();

const { username, password } = this.state;

var data = new FormData();

data.append("username", username);
data.append("password", password);
AuthService.login(data)
.then((result) => {
if (!result) {
// this.setState({ errorMsg: loginType ? "The password you entered for
the username " + username + " is incorrect" : (result.data.error || "Either User
Name or OTP Not Valid") });
return;
}

if (result?.token) {
this.props.userDetail(result);
this.props.history.push({
pathname: '/user-dashboard'
});
window.location.reload();
}
 else {
// ToastService.error(result.data.error);
}

})
.catch((err) => {

console.error(err);
});
};

bgshapestyle = {
clipPath: "polygon(0 0, 100% 0, 100% 71%, 0% 100%)",
background: "#00A88A",
position: "absolute",
top: "0",
left: "0",
width: "100%",
height: "100%",
zIndex: "0",
padding: '0 0 1rem 0'
}

innerform = {
zIndex: "9",
position: "inherit",
padding: "40px 0"
}
loginbox = {
background: "#FFFFFF",
boxShadow: "6px 4px 21px rgba(0, 0, 0, 0.25)",
borderRadius: "20px",

/* From https://css.glass */
background: 'rgb(255 255 255 / 83%)',
borderRadius: '16px',
boxShadow: '0 4px 30px rgba(0, 0, 0, 0.1)',
backdropFilter: 'blur(10.4px)',
webkitBackdropFilter: 'blur(10.4px)',
border: '1px solid rgba(255, 255, 255, 0.28)',
}
normalhd = {
fontStyle: "normal",
fontWeight: "700",
fontSize: "22px",
lineHeight: "28px",
color: "rgb(89 89 89)",
margin: '0'
}
colorhd = {
fontStyle: "normal",
fontWeight: "800",
lineHeight: "28px",
background: "linear-gradient(90deg, #F19755 5.81%, #00A88A 100%)",
backgroundClip: "text",
margin: '0',
textFillColor: 'transparent',
webkitBackgroundClip: "text",
webkitTextFillColor: "transparent",
 }

benefitGrid = {
display: 'grid',
gridTemplateColumns: '1fr 1fr',
gridTemplateRows: '1fr 1fr',
columnGap: '1rem',
rowGap: '1rem',
marginTop: '1rem',
flexGrow: '1'
}

gridcell = {
border: '1px solid gray',
borderRadius: '10px',
backgroundColor: 'white',
boxShadow: "rgb(0 133 109) -10px -10px 15px, rgb(0 0 0 / 15%) 10px 10px 15px",

/* From https://css.glass */
background: 'rgba(255, 255, 255, 0.33)',
borderRadius: '16px',
boxShadow: '0 4px 30px rgba(0, 0, 0, 0.1)',
backdropFilter: 'blur(10.4px)',
webkitBackdropFilter: 'blur(10.4px)',
border: '1px solid rgba(255, 255, 255, 0.28)',

display: 'flex',
flexDirection: 'column',
alignItems: 'center',
rowGap: '8px',
justifyContent: 'center',
padding: '1rem'

render() {
const { username, password } = this.state;

return (
<div style={{ position: "relative" }}>
{/* below is the bg shape */}
<div className="bgshape" style={this.bgshapestyle}></div>
<div className="container" style={this.innerform}>
<form className="formRegistration row" ref={c => { this.form = c; }}
style={{ minHeight: "40vh", zIndex: '9' }}>
{/* below is the left section containing the heading and paragraphs */}
<div className="col-sm-7">
<section style={{ width: '100%', padding: '1rem', display: 'flex',
flexDirection: 'column', height: '100%' }}>
<h2 style={{ color: 'white', fontSize: '40px', fontWeight:
'700' }}>Ayush Global Portal
</h2>
<p style={{ color: 'white', fontSize: "14px", textAlign:
'justify' }}>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum, beatae
provident, quod suscipit a voluptatum vel odit, eligendi dolores voluptate deleniti
ab ullam perspiciatis! Itaque voluptatum eveniet error dolore illo!</p>
<h3 style={{ fontSize: '30px', fontWeight: '700', color: '#006755',
marginTop: '3rem' }}>Benefits of registering with us</h3>
 {/* our benefits grid below */}
<div style={this.benefitGrid}>
<div style={this.gridcell}>
<img
src={require("../public/treesvg.svg")}
alt="Ayush grid logo"
style={{ flexGrow: '1', width: "80px" }}
/>
<p style={{ color: '#004337', fontSize: '13px', textAlign:
'center' }}>Lorem ipsum, dolor sit amet consectetur adipisicing elit. A architecto
voluptates blanditiis officia dolores dignissimos ratione vero </p>
</div>
<div style={this.gridcell}></div>
<div style={this.gridcell}></div>
<div style={this.gridcell}></div>
</div>
</section>
</div>

{/* below is the right column containing the registration form */}
<div className="col-sm-5">

{/* below is the form */}

<section style={this.loginbox}>
<div style={{ display: "flex", flexDirection: "column", alignItems:
"center" }}>
<div style={{ columnGap: "1rem", minHeight: "40vh", padding:
"1.5rem", width: "100%", display: "flex", flexDirection: "column", }}>

{/* below is the registration heading logos section*/}

<div style={{ display: "flex", width: '100%', gap: "8px",
alignItems: 'center' }}>
<img
src={require("../public/grid-logo-1.png")}
alt="Ayush grid logo"
style={{ flexGrow: '1', width: "166px", height: '63px' }}
/>
<div style={{ width: "5px", height: '51px', background:
"#F09755", borderRadius: "20px" }}></div>
<div style={{ display: 'flex', flexDirection: "column",
flexGrow: '1' }}>
<p style={this.normalhd}>Sign-In To<br />
<span style={this.colorhd}>Ayush Global Portal</span>
</p>
</div>
</div>

<p style={{ fontStyle: 'italic', fontWeight: '500', fontSize:

'13px', color: '#808080', margin: '1rem 0.5rem' }}>Enter your details below to
Login</p>

{/* below is the main registration fields */}

<form style={{ display: 'flex', flexDirection: 'column',

rowGap: '1rem' }}>
{/* <div style={{ display: 'flex', flexDirection: 'column',
margin: '0 0.5rem' }}>
 <label for="username"
style={{ marginBottom: '0.25rem', color: '#9e9e9e',
fontSize: '14px' }}>Your Username</label>
<input value={username} onChange={(e) =>
this.setState({ username: e.target.value })} validations={[required]}
type="username" name="username" id="username" style={{ background: '#f8f8f8',
border: '2px solid #dddddd', padding: '1rem', borderRadius: '14px' }}
placeholder="your username" required="" />
</div> */}

<div style={{ display: 'flex', flexDirection: 'column',

margin: '0 0.5rem' }}>
<label for="email"
style={{ marginBottom: '0.25rem', color: '#9e9e9e',
fontSize: '14px' }}>Your email</label>
<input type="email" name="email" id="email"
value={username} onChange={(e) => this.setState({ username: e.target.value })}
validations={[required]} style={{ background: '#f8f8f8', border: '2px solid
#dddddd', padding: '1rem', borderRadius: '14px' }} placeholder="[email protected]"
required="" />
</div>

<div style={{ display: 'flex', flexDirection: 'column',

margin: '0 0.5rem' }}>
<label for="password"
style={{ marginBottom: '0.25rem', color: '#9e9e9e',
fontSize: '14px' }}>Password</label>
<input type="password" value={password} onChange={(e) =>
this.setState({ password: e.target.value })} validations={[required]}
name="password" id="password" style={{ background: '#f8f8f8', border: '2px solid
#dddddd', padding: '1rem', borderRadius: '14px' }} placeholder="••••••••"
required="" />
</div>

{/* <div style={{ display: 'flex', flexDirection: 'column',

margin: '0 0.5rem' }}>
<label for="confirm-password"
style={{ marginBottom: '0.25rem', color: '#9e9e9e',
fontSize: '14px' }}>Confirm Password</label>
<input type="confirm-password" name="confirm-password"
id="confirm-password" style={{ background: '#f8f8f8', border: '2px solid #dddddd',
padding: '1rem', borderRadius: '14px' }} placeholder="••••••••" required="" />
</div> */}

<div style={{ display: 'flex', padding: '0 0.5rem',

columnGap: '8px' }} >
<div style={{ display: 'flex', alignItems: 'center' }}>
<input id="terms" aria-describedby="terms"
type="checkbox"
style={{ width: '1rem', height: '1rem', border: '2px
solid grey', borderRadius: '4px' }}
required="" />
</div>
<div>
<label for="terms" style={{ color: '#868686' }}>Keep Me
logged in

</label>
 </div>
</div>
<p style={{ padding: '0 0.5rem' }}>By logging in you agree to
the <a style={{ color: '#00a78a', fontWeight: '500' }} href="#">Usage Terms and
Conditions</a> of Ayush global Portal</p>

<div style={{ display: 'flex', flexDirection: 'column',

padding: '0 0.5rem', rowGap: '8px' }} >
<button onClick={(e) => this.handleLogin(e)}
style={{ backgroundColor: '#007e67', borderRadius:
'14px', border: 'none', padding: '1rem', fontWeight: '600', fontSize: '18px',
color: 'white' }}>Log In</button>
<p >
Have not registered with us yet? <a href="/Registration"
>Register here</a>
</p>
</div>
</form>
{/* registration form end */}
</div>
</div>
</section>
</div>
</form>

</div>
</div>
);
}
}

const mapStateToProps = state => {

return { translation: state.translation };
};
const mapDispatchToProps = (dispatch) => {
return {
userDetail: user => dispatch(authAction.userDetail(user))
};
};

export default compose(connect(mapStateToProps, mapDispatchToProps), withRouter)

(Login);