import TextField from "material-ui/TextField";

import RaisedButton from "material-ui/RaisedButton";

export default class DepartmentForm extends React.Component {

constructor(props) {
super(props)
this.state = {
department: {
id: this.getDepartmentId(props),
name: '',
company_id: '',
firstNameError: "",
};

redirect: null,
companies:[],
errors: []
}

change = e => {
this.props.onChange({ [e.target.name]: e.target.value });
this.setState({
[e.target.name]: e.target.value
});
};

this.setName = this.setName.bind(this)
this.setCompanyId = this.setCompanyId.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}

getDepartmentId(props) {
try {
return props.match.params.id
} catch (error) {
return null
}
}

setName(event) {
let newVal = event.target.value || ''
this.setFieldState('name', newVal)
this.validateError()

setCompanyId(event) {
let newVal = event.target.value || ''
 this.setFieldState('company_id', newVal)
}

setFieldState(field, newVal) {
this.setState((prevState) => {
let newState = prevState
newState.department[field] = newVal
return newState
})
}

validate = () => {
let isError = false;
const errors = {
firstNameError: ""
};

if (this.state.username.length < 5) {
isError = true;
errors.usernameError = "Username needs to be atleast 5 characters long";
}

this.setState({
...this.state,
...errors
});

return isError;
};

onSubmit = e => {
e.preventDefault();
// this.props.onSubmit(this.state);
const err = this.validate();
if (!err) {
// clear form
this.setState({
firstName: "",
firstNameError: "",
lastName: "",
});
this.props.onChange({
firstName: ""

});
}
};

handleSubmit(event) {
event.preventDefault()
let isvalid = this.validate()
console.log(this.state.department)
if(isvalid){
let department = {
name: this.state.department.name,
 company_id: this.state.department.company_id,
}
Api.saveDepartment(department, this.state.department.id)
.then(response => {
const [error, errors] = response
if (error) {
this.setState({
errors: errors
})
} else {
this.setState({
redirect: '/departments'
})
}
})
}

componentDidMount() {
if (this.state.department.id) {
page_title = 'Edit'
Api.getDepartment(this.state.department.id)
.then(response => {
const [error, data] = response
if (error) {
this.setState({
errors: data
})
} else {
this.setState({
department: data,
errors: []
})
}
})
}
CompanyApi.getCompanies()
.then(response=>{
const[error,data] = response
if(error){
this.setState({
errors:data
})
}
else{
this.setState({
companies: data,
errors:[]
})
}
})
}
render() {
return (
<form>
<TextField
name="firstName"
hintText="First name"
floatingLabelText="First name"
value={this.state.firstName}
onChange={e => this.change(e)}
errorText={this.state.firstNameError}
floatingLabelFixed
/>
<br />
<TextField
name="lastName"
hintText="Last Name"
floatingLabelText="Last Name"
value={this.state.lastName}
onChange={e => this.change(e)}
errorText={this.state.lastNameError}
floatingLabelFixed
/>
<br />
<TextField
name="username"
hintText="Username"
floatingLabelText="Username"
value={this.state.username}
onChange={e => this.change(e)}
errorText={this.state.usernameError}
floatingLabelFixed
/>
<br />
<TextField
name="email"
hintText="Email"
floatingLabelText="Email"
value={this.state.email}
onChange={e => this.change(e)}
errorText={this.state.emailError}
floatingLabelFixed
/>
<br />
<TextField
name="password"
hintText="Password"
floatingLabelText="Password"
value={this.state.password}
onChange={e => this.change(e)}
errorText={this.state.passwordError}
type="password"
floatingLabelFixed
/>
<br />
<RaisedButton label="Submit" onClick={e => this.onSubmit(e)} primary />
</form>
);
}
}