import React, { Component } from "react";
import api from "../../services/api";
import { withRouter } from "react-router-dom";
import { Form, Container } from "./styles";
import NavBar from "../../components/navbar";

class EditUser extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user: {
        id: null,
        firstName: "",
        lastName: "",
        username: "",
        password: "",
      },
    };

    this.getUserById = this.getUserById.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.onChangeFirstName = this.onChangeFirstName.bind(this);
    this.onChangeLastName = this.onChangeLastName.bind(this);
    this.onChangeUsername = this.onChangeUsername.bind(this);
    this.onChangePassword = this.onChangePassword.bind(this);
  }

  onChangeFirstName(e) {
    const firstName = e.target.value;

    this.setState(function (prevState) {
      return {
        user: {
          ...prevState.firstName,
          firstName: firstName,
        },
      };
    });
  }

  onChangeLastName(e) {
    const lastName = e.target.value;

    this.setState((prevState) => ({
      user: {
        ...prevState.lastName,
        lastName: lastName,
      },
    }));
  }

  onChangeUsername(e) {
    const username = e.target.value;

    this.setState((prevState) => ({
      user: {
        ...prevState.username,
        username: username,
      },
    }));
  }

  onChangePassword(e) {
    const password = e.target.value;

    this.setState((prevState) => ({
      user: {
        ...prevState.password,
        password: password,
      },
    }));
  }

  componentDidMount() {
    this.getUserById(this.props.match.params.id);
  }

  getUserById(id) {
    api
      .get(`/users/${id}`)
      .then((response) => {
        this.setState({
          user: response.data,
        });
      })
      .catch((e) => {
        console.log(e);
      });
  }

  handleSubmit(e) {
    var data = {
      id: this.state.user.id,
      firstName: this.state.user.firstName,
      lastName: this.state.user.lastName,
      username: this.state.user.username,
      password: this.state.user.password,
    };
    api
      .put(`/users/${this.state.user.id}`, data)
      .then((response) => {
        this.setState((prevState) => ({
          user: {
            ...prevState.user,
          },
        }));
        console.log(response.data);
      })
      .catch((e) => {
        console.log(e);
      });
    e.preventDefault();
    alert("Usuário atualizado com sucesso");
  }

  render() {
    return (
      <div>
        <NavBar />
        <Container>
          <Form onSubmit={this.handleSubmit}>
            <label>Primeiro nome</label>
            <input
              type="text"
              value={this.state.user.firstName}
              onChange={this.onChangeFirstName}
            />
            <label>Último nome</label>
            <input
              type="text"
              value={this.state.user.lastName}
              onChange={this.onChangeLastName}
            />
            <label>Username</label>
            <input
              type="text"
              value={this.state.user.username}
              onChange={this.onChangeUsername}
            />
            <label>Password</label>
            <input
              type="password"
              placeholder="Digite sua senha"
              value={this.state.user.password}
              onChange={this.onChangePassword}
            />
            <button type="submit">Atualizar</button>
          </Form>
        </Container>
      </div>
    );
  }
}

export default withRouter(EditUser);