import { useState } from "react";
import Footer from "./Footer";
import Navbar from "./Navbar";
import profilepic from "../img/samplepic.jpg";
import Addproperty from "./Addproperty";
import UserProperties from "./UserProperties";
import "../dashboard.css";
import { useSelector } from "react-redux";
import UserProfile from "./UserProfile";
import { NavLink } from "react-router-dom";

const Dashboard = () => {
  const [activeTab, setActiveTab] = useState("dashboard");
  const { user } = useSelector((state) => state.auth);
  const renderTabContent = () => {
    switch (activeTab) {
      case "Userdetails":
        return <UserProfile />;

      case "addProperty":
        return <Addproperty />;

      case "activeProperties":
        return (
          <div>
            <h3>Active Properties</h3>
            <UserProperties />
          </div>
        );
      case "closedProperties":
        return <p>These are your closed properties.</p>;

      default:
        return <></>;
    }
  };

  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={user.result.profileImage || 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 === "Userdetails" ? "active" : ""
                }`}
                onClick={() => setActiveTab("Userdetails")}
              >
                <span className="fa fa-home" style={{ color: "#F74B02" }} />
                <span>User Profile</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-1">
            {/* Static Dashboard greeting */}
            <br />
            <span>
              Welcome to{" "}
              <span style={{ color: "#067ADC" }}>
           

              <NavLink
                                    to={`/profile/${user.result.userId}`}
                                    className="link-primary text-decoration-none"
                                    target="_blank"
                                  >
                                     {user.result.title}. {user.result.firstName}{" "}
                                     {user.result.middleName} {user.result.lastName}
                                  </NavLink>
              
              </span>
            </span>
            <br />

            {/* Dynamic content based on the selected tab */}

            {renderTabContent()}
          </div>
        </div>
      </div>
      <Footer />
    </>
  );
};

export default Dashboard;