import { useState } from "react";
import { toast } from "react-hot-toast";
import AppBar from "@/components/layouts/AppBar";
import Layout from "@/components/layouts/Layout";
import WithAuth from "@/components/auth/WithAuth";
import apiOdoo from "@/core/utils/apiOdoo";
import { 
  useAuth,
  setAuth as setAuthCookie,
  getAuth
} from "@/core/utils/auth";

export default function MyProfile() {
  const [auth, setAuth] = useAuth();
  const [editMode, setEditMode] = useState(false);
  const [password, setPassword] = useState('');

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

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

  const cancelEdit = () => {
    setEditMode(false);
    setAuth(getAuth());
    setPassword('');
  }

  return (
    <WithAuth>
      <Layout>
        <AppBar title="Akun Saya" />
        
        <form onSubmit={update} className="w-full px-4">
          { auth && (
            <>
              <label className="form-label mt-4 mb-2">Email</label>
              <input 
                type="text"
                className="form-input" 
                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" 
                placeholder="John Doe"
                name="name"
                value={auth.name}
                onChange={handleInput}
                disabled={!editMode}
              />

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

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

              <label className="form-label mt-4 mb-2">Kata Sandi</label>
              <input 
                type="password"
                className="form-input" 
                placeholder="••••••••"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                disabled={!editMode}
              />
            </>
          ) }

          { editMode && (
            <div className="flex gap-x-3 mt-6">
              <button 
                type="button" 
                className="btn-light flex-1 float-right"
                onClick={cancelEdit}
              >
                Batal
              </button>
              <button type="submit" className="btn-yellow flex-1 float-right">Simpan</button>
            </div>
          ) }

          { !editMode && (
            <button 
              type="button" 
              className="btn-light float-right mt-6 w-full"
              onClick={() => setEditMode(true)}
            >
              Ubah Profil
            </button>
          ) }
        </form>
      </Layout>
    </WithAuth>
  );
}