import { useState,useEffect } from "react";
import Footer from "./Footer";
import Navbar from "./Navbar";
import { useSelector, useDispatch } from "react-redux";
import profilepic from "../img/samplepic.jpg";
import Addproperty from "./Addproperty";
import { fetchUserProperties } from "../redux/features/propertySlice";
import "../dashboard.css";
    
const Dashboard = () => {
  const dispatch = useDispatch();
  const { user } = useSelector((state) => ({ ...state.auth }));
  const { userProperties} = useSelector((state) => state.property);
  const [activeTab, setActiveTab] = useState("dashboard");

    // Fetch user properties when "Active Properties" tab is selected
    useEffect(() => {
      if (activeTab === "activeProperties") {
        dispatch(fetchUserProperties(user?.result?.userId));
      }
    }, [activeTab, dispatch, user?.result?.userId]);

  const renderTabContent = () => {
    switch (activeTab) {
      case "addProperty":
        return <Addproperty />;
      case "activeProperties":
        return   <div>
        <h3>Active Properties</h3>
        {userProperties.length > 0 ? (
          <ul>
            {userProperties.map((property) => (
              <li key={property._id}>{property.title}</li>
            ))}
          </ul>
        ) : (
          <p>No active properties found.</p>
        )}
      </div>;
      case "closedProperties":
        return <p>These are your closed properties.</p>;
      default:
        return (
          <div className="d-flex justify-content-center mt-7 gap-2 p-3">
            <div className="col-md-6">
              <div className="card cardchildchild p-2">
                <div className="profile1">
                  <img
                    src="https://i.imgur.com/NI5b1NX.jpg"
                    height={90}
                    width={90}
                    className="rounded-circle"
                  />
                </div>
                <div className="d-flex flex-column justify-content-center align-items-center mt-5">
                  <span className="name">Bess Wills</span>
                  <span className="mt-1 braceletid">Bracelet ID: SFG 38393</span>
                  <span className="dummytext mt-3 p-3">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Text elit more smtit. Kimto lee.
                  </span>
                </div>
              </div>
            </div>
            <div className="col-md-6">
              <div className="card cardchildchild p-2">
                <div className="profile1">
                  <img
                    src="https://i.imgur.com/YyoCGsa.jpg"
                    height={90}
                    width={90}
                    className="rounded-circle"
                  />
                </div>
                <div className="d-flex flex-column justify-content-center align-items-center mt-5">
                  <span className="name">Bess Wills</span>
                  <span className="mt-1 braceletid">Bracelet ID: SFG 38393</span>
                  <span className="dummytext mt-3 p-3">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Text elit more smtit. Kimto lee.
                  </span>
                </div>
              </div>
            </div>
          </div>
        );
    }
  };

  return (
    <>
      <Navbar />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <div className="d-flex flex-row">
        {/* Left sidebar */}
        <div className="col-md-3">
          <div className="card card1 p-5">
            <img
              className="img-fluid"
              src={profilepic}
              alt="ProfileImage"
              style={{
                marginTop: "0px",
                maxWidth: "200px",
                maxHeight: "200px",
              }}
            />
            <hr className="hline" />
            <div className="d-flex flex-column align-items-center">
              <button
                className={`btn ${activeTab === "dashboard" ? "active" : ""}`}
                // style={{ backgroundColor: "#fda417", border: "#fda417" }}
                onClick={() => setActiveTab("dashboard")}
              >
                <i className="fa fa-dashboard" style={{ color: "#F74B02" }} />
                <span>Dashboard</span>
              </button>
           
              <button
                className={`btn mt-3 ${activeTab === "addProperty" ? "active" : ""}`}
                onClick={() => setActiveTab("addProperty")}
              >
                <span className="fa fa-home" style={{ color: "#F74B02" }} />
                <span>Add Property</span>
              </button>
              <button
                className={`btn mt-3 ${activeTab === "activeProperties" ? "active" : ""}`}
                onClick={() => setActiveTab("activeProperties")}
              >
                <span className="fa fa-home" style={{ color: "#F74B02" }} />
                <span>Active Properties</span>
              </button>
              <button
                className={`btn mt-3 ${activeTab === "closedProperties" ? "active" : ""}`}
                onClick={() => setActiveTab("closedProperties")}
              >
                <span className="fa fa-home" style={{ color: "#F74B02" }} />
                <span>Closed Properties</span>
              </button>
              {/* <span className="other mt-4">Other Information</span>
              <button className="btn mt-3">
                <i className="fa fa-book" />
                <span>Knowledge</span>
              </button> */}
            </div>
          </div>
        </div>

        {/* Main content area */}
        <div className="col-md-9">
          <div className="card card2 p-0">
            {/* Static Dashboard greeting */}
            <div className="hello d-flex justify-content-end align-items-center mt-3">
              <span>
                Welcome to{" "}
                <span style={{ color: "#067ADC" }}>
                  {user.result.title}. {user.result.firstName} {user.result.middleName} {user.result.lastName}
                </span>
              </span>
              <br /> <br /> <br /> 
            </div>

            {/* Dynamic content based on the selected tab */}
            <div className="tab-content p-3">
              {renderTabContent()}
            </div>
          </div>
        </div>
      </div>
      <Footer />
    </>
  );
};

export default Dashboard;