"use client";
import apiClient from "@/app/lib/apiClient";
import { useState } from "react";
import toast from "react-hot-toast";

export default function ChangePassword() {
  const [password, setPass] = useState("");
  const [newPassword, setNewPass] = useState("");
  const [confirmNewPass, setconfirmNewPass] = useState("");

  const handleChangePass = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const data = { password, newPassword };

    try{
      const response = await apiClient.post("/user/changePassword", data);
      toast.success( `${response.data.message}`)
      setPass('');
      setNewPass('');
      setconfirmNewPass('');
    }catch{
      toast.error( `No es la contraseña actual`)
    }
    
  };

  return (
    <section className="centerGrid containerSection">
      <form onSubmit={handleChangePass} className="pass">
        <div className="containerInput relative">
          <label className="label">Contraseña actual</label>
          <input
            placeholder="Coloca tu contraseña..."
            value={password}
            type="password"
            onChange={(e) => {
              setPass(e.target.value);
            }}
          />
          <span />
        </div>

        <div className="containerInput relative">
          <label className="label">Nueva contraseña</label>
          <input
            placeholder="Coloca tu nueva contraseña..."
            value={newPassword}
            type="password"
            onChange={(e) => {
              setNewPass(e.target.value);
            }}
          />
          <span />
        </div>

        <div className="containerInput relative">
          <label className="label">Confirmar la contraña</label>
          <input
            placeholder="Coloca tu nueva contraseña..."
            value={confirmNewPass}
            type="password"
            onChange={(e) => {
              setconfirmNewPass(e.target.value);
            }}
          />
          <span />
        </div>

        <div className="containerButton">
          <button
            className="button buttonSearch"
            style={{ maxWidth: "100%", width: "100%" }}
          >
            Confirmar
          </button>

          <button
            className="button buttonCancel"
            style={{ maxWidth: "100%", width: "100%" }}
          >
            Cancelar
          </button>
        </div>
      </form>
    </section>
  );
}
//IO