import React, { useState, useEffect } from "react";

const defaultModel = {
  id: "",
  name: "",
  description: "",
  projectId: "",
};
const BuildingModel = ({
  project,
  onClose,
  onSubmit,
  clearTrigger,
  onClearComplete,
}) => {
  const [formData, setFormData] = useState(defaultModel);

  useEffect(() => {
    if (clearTrigger) {
      setFormData(defaultModel); // Clear form
      onClearComplete(); // Notify parent that clearing is done
    }
  }, [clearTrigger, onClearComplete]);

  // Handle input change
  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  const handleBuildigChange = (e) => {
    const { name, value } = e.target;
    const building = project.buildings.find((b) => b.id === Number(value));
    if (building) {
      delete building.floors;
      building.projectId = project.id;
      setFormData(building);
    } else
      setFormData({
        id: "",
        name: "",
        description: "",
        projectId: project.id,
      });
    //setFormData({ ...formData, [name]: value });
  };

  // Handle form submission
  const handleSubmit = (e) => {
    e.preventDefault();
    formData.projectId = project.id;

    onSubmit(formData); // Pass the updated data to the parent
  };

  return (
    <div className="modal-dialog modal-lg modal-simple modal-edit-user">
      <div className="modal-content">
        <div className="modal-body">
          <button
            type="button"
            className="btn-close"
            data-bs-dismiss="modal"
            aria-label="Close"
          ></button>
          <div className="text-center mb-2">
            <h5 className="mb-2">Manage Buildings - {project.name}</h5>
          </div>
          <form className="row g-2" onSubmit={handleSubmit}>
            <div className="col-12 col-md-12">
              <label className="form-label" htmlFor="name">
                Select Building
              </label>
              <select
                id="buildingId"
                name="buildingId"
                className="select2 form-select form-select-sm"
                aria-label="Default select example"
                onChange={handleBuildigChange}
                value={formData.buildingId}
              >
                <option value="0">Add New Building</option>
                {project.buildings.map((building) => (
                  <option key={building.id} value={building.id}>
                    {building.name}
                  </option>
                ))}
              </select>
            </div>
            <div className="col-12 col-md-12">
              <label className="form-label" htmlFor="name">
                Building Name
              </label>
              <input
                type="text"
                id="name"
                name="name"
                className="form-control form-control-sm"
                placeholder="Building Name"
                onChange={handleChange}
                value={formData.name}
              />
            </div>
            <div className="col-12 col-md-12">
              <label className="form-label" htmlFor="description">
                Description
              </label>
              <textarea
                type="text"
                id="description"
                rows="5"
                name="description"
                className="form-control form-control-sm"
                placeholder="Description"
                onChange={handleChange}
                value={formData.description}
              />
            </div>

            <div className="col-12 text-center">
              <button type="submit" className="btn btn-primary me-3">
                {formData.id ? "Edit Building" : "Add Building"}
              </button>
              <button
                type="reset"
                className="btn btn-label-secondary"
                data-bs-dismiss="modal"
                aria-label="Close"
              >
                Cancel
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
};

export default BuildingModel;