import React, { useState } from "react";
import { Info } from "lucide-react";
import axios from "axios";
import { API_BASE_URL } from "../config";
import {useAuth} from "../AuthContext";

function ModifObject({ object, defafficherModif }) {
  const {user}=useAuth();
  const [description, setDescription] = useState(object.description || "");
  const [type, setType] = useState(object.type || "");
  const [location, setLocalisation] = useState(object.location || "");
  const [status, setStatus] = useState(object.status || "inactive");
  const [isActive, setActive] = useState(object.status === "active");

  function handleSubmit(event) {
    event.preventDefault();
    axios
      .post(`${API_BASE_URL}/modifObjet`, {
        id: object.id,
        idUser:user.id,
        description,
        type,
        location,
        status,
        shouldUpdatePoints:true
      })
      .then((response) => {
        console.log("Modification réussie :", response.data);
      })
      .catch((error) => {
        console.error("Erreur lors de la modification :", error);
      });
    defafficherModif(false);
    window.location.reload();
  }

  function handleCancel() {
    defafficherModif(false);
  }

  function handleStatusChange() {
    setActive((prevIsActive) => {
      const newIsActive = !prevIsActive;
      setStatus(newIsActive ? "active" : "inactive");
      return newIsActive;
    });
  }

  return (
    <form onSubmit={handleSubmit} className="bg-white p-6 rounded-xl min-w-5xl">
      <div className="flex align-items gap-9">
        <div className="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
          <Info className="text-indigo-600" size={24} />
        </div>
        <h1 className="text-black text-2xl font-bold mb-1">
          Modifier les infos
        </h1>
      </div>
      <div className="mb-5">
        <label
          htmlFor="description"
          className="block mb-2 text-sm font-medium text-gray-900"
        >
          Description
        </label>
        <input
          id="description"
          className="text-gray-600 border rounded-lg p-2 w-full"
          type="text"
          value={description}
          onChange={(e) => setDescription(e.target.value)}
          required
        />
      </div>

      <div className="mb-5">
        <label
          htmlFor="type"
          className="block mb-2 text-sm font-medium text-gray-900"
        >
          Type :
        </label>
        <input
          id="type"
          className="text-gray-600 border rounded-lg p-2 w-full"
          type="text"
          value={type}
          onChange={(e) => setType(e.target.value)}
          required
        />
      </div>

      <div className="mb-5">
        <label
          htmlFor="location"
          className="block mb-2 text-sm font-medium text-gray-900"
        >
          Localisation :
        </label>
        <input
          id="location"
          className="text-gray-600 border rounded-lg p-2 w-full"
          type="text"
          value={location}
          onChange={(e) => setLocalisation(e.target.value)}
          required
        />
      </div>

      <div className="mb-5">
        <label className="block mb-2 text-sm font-medium text-gray-900">
          Status :
        </label>
        <div className="inline-flex items-center gap-2">
          <label
            htmlFor="switch-component-on"
            className="text-slate-600 text-sm cursor-pointer"
          >
            Inactive
          </label>
          <div className="relative inline-block w-11 h-5">
            <input
              id="switch-component-on"
              type="checkbox"
              checked={isActive}
              onChange={handleStatusChange}
              className="peer appearance-none w-11 h-5 bg-slate-100 rounded-full checked:bg-slate-800 cursor-pointer transition-colors duration-300"
            />
            <label
              htmlFor="switch-component-on"
              className="absolute top-0 left-0 w-5 h-5 bg-white rounded-full border border-slate-300 shadow-sm transition-transform duration-300 peer-checked:translate-x-6 peer-checked:border-slate-800 cursor-pointer"
            ></label>
          </div>
          <label
            htmlFor="switch-component-on"
            className="text-slate-600 text-sm cursor-pointer"
          >
            Active
          </label>
        </div>
      </div>

      <div className="mb-5 flex flex-col">
        <button
          type="submit"
          className="text-blue-500 hover:cursor-pointer hover:underline"
        >
          Confirmer les modifications
        </button>
        <button
          type="button"
          className="text-red-500 hover:cursor-pointer hover:underline"
          onClick={handleCancel}
        >
          Annuler les modifications
        </button>
      </div>
    </form>
  );
}

export default ModifObject;