import { useEffect, useState } from "react";
import { toast } from "react-hot-toast";
import Header from "../../components/Header";
import Layout from "../../components/Layout";
import apiOdoo from "../../helpers/apiOdoo";
import { 
  getAuth, 
  setAuth as setAuthCookie
} from "../../helpers/auth";

export default function MyProfile() {
  const [auth, setAuth] = useState({
    name: '',
    email: '',
    phone: '',
    mobile: ''
  });

  useEffect(() => {
    setAuth(getAuth());
  }, []);

  const update = async (e) => {
    e.preventDefault();
    let update = await apiOdoo('PUT', `/api/v1/user/${auth.id}`, {
      name: auth.name,
      phone: auth.phone,
      mobile: auth.mobile,
      token: auth.token
    });
    setAuthCookie(update.user);
    toast.success('Berhasil mengubah profil', { duration: 1500 });
  };

  const handleInput = (e) => {
    let authToUpdate = auth;
    authToUpdate[e.target.name] = e.target.value;
    setAuth({ ...authToUpdate });
  }

  return (
    <>
      <Header title="Profil Saya - Indoteknik" />
      <Layout>
        <form onSubmit={update} className="w-full p-4">
          <h1 className="mb-6">Profil Saya</h1>

          <label className="form-label mt-4 mb-2">Email</label>
          <input 
            type="text"
            className="form-input bg-gray_r-2" 
            placeholder="johndoe@gmail.com"
            name="email"
            value={auth.email}
            onChange={handleInput}
            disabled={true}
          />

          <label className="form-label mt-4 mb-2">Nama Lengkap</label>
          <input 
            type="text"
            className="form-input bg-gray_r-2" 
            placeholder="John Doe"
            name="name"
            value={auth.name}
            onChange={handleInput}
          />

          <label className="form-label mt-4 mb-2">No Telepon</label>
          <input 
            type="tel"
            className="form-input bg-gray_r-2" 
            placeholder="08xxxxxxxx"
            name="phone"
            value={auth.phone}
            onChange={handleInput}
          />

          <label className="form-label mt-4 mb-2">No Handphone</label>
          <input 
            type="tel"
            className="form-input bg-gray_r-2" 
            placeholder="08xxxxxxxx"
            name="mobile"
            value={auth.mobile}
            onChange={handleInput}
          />

          <button type="submit" className="btn-yellow float-right mt-4">Simpan</button>

        </form>
      </Layout>
    </>
  );
}