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

export default function MyProfile() {
  const [auth, setAuth] = useAuth();

  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 (
    <WithAuth>
      <Layout>
        <AppBar title="Akun Saya" />
        
        <form onSubmit={update} className="w-full px-4">
          { auth?.id && (
            <>
              <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>
    </WithAuth>
  );
}