import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { showUser } from "../redux/features/userSlice";
import { useParams } from "react-router-dom";
import profilepic from "../img/samplepic.jpg";
import propertydummy from "../img/propertydummy.jpg";
import "../profileview.css";
import Navbar from "./Navbar";

const ProfileView = () => {
  const { userId } = useParams(); // Extract the userId from the route
  const dispatch = useDispatch();
  const { user, loading } = useSelector((state) => state.user); // Access the loading state as well
  console.log("user", user);

  useEffect(() => {
    // Fetch the user by ID when the component loads
    if (userId) {
      dispatch(showUser(userId));
    }
  }, [userId, dispatch]);

  if (loading) {
    return <div>Loading...</div>; // Show a loading message while data is being fetched
  }

  return (
    <>
      <Navbar />
      <br />
      <br />
      <br />
      <br />
      <br />

      <div className="main-body">
        {/* /Breadcrumb */}
        <div className="row gutters-sm">
          <div className="col-md-4 mb-3">
            <div className="card">
              <div className="card-body">
                <div className="d-flex flex-column align-items-center text-center">
              
                  <img
                    // src="https://bootdey.com/img/Content/avatar/avatar7.png"
                    src={user.profileImage}
                    alt="Admin"
                    className="rounded-circle"
                    width={150}
                  />

                  <h4>
                    {user.title}. {user.firstName} {user.middleName}{" "}
                    {user.lastName}
                  </h4>
                  {/* <span className="text-secondary mb-1">Full Stack Developer</span> */}
                  <span className="text-muted font-size-sm">
                    <i
                      className="fa fa-map-marker"
                      style={{ color: "#F74B02", fontSize: "20px" }} // Set the desired font size here
                    />
                    {"  "}
                    {user.city}, {user.state}, {user.county}, {user.zip}
                  </span>
                  {/* <button className="btn btn-outline-primary">Message</button> */}
                </div>
                <br />
              </div>
            </div>
          </div>

          <div className="col-md-4 mb-3">
            <div className="card">
              <div className="card-body">
                <h1
                  className="d-flex align-items-center mb-3"
                  style={{ color: "#fda417", fontSize: "26px" }}
                >
                  <i
                    className="material-icons text-info mr-2"
                    style={{ color: "#fda417", fontSize: "26px" }}
                  >
                    Recent
                  </i>
                  Project investments
                </h1>
                <hr />
                <img
                  src={propertydummy}
                  alt="Admin"
                  className="rounded-circle"
                  style={{
                    marginRight: "10px",
                    maxWidth: "50px",
                    maxHeight: "50px",
                  }}
                />
                <small>Web Design project in California</small>
                <div
                  className="progress"
                  style={{ width: "100%", marginTop: "10px" }}
                >
                  <div
                    className="progress-bar"
                    role="progressbar"
                    style={{ width: "25%" }}
                    aria-valuenow={25}
                    aria-valuemin={0}
                    aria-valuemax={100}
                  >
                    25% completed
                  </div>
                </div>
                <hr />

                <img
                  src={propertydummy}
                  alt="Admin"
                  className="rounded-circle"
                  style={{
                    marginRight: "10px",
                    maxWidth: "50px",
                    maxHeight: "50px",
                  }}
                />
                <small>Web Design project in California</small>
                <div
                  className="progress"
                  style={{ width: "100%", marginTop: "10px" }}
                >
                  <div
                    className="progress-bar"
                    role="progressbar"
                    style={{ width: "75%" }}
                    aria-valuenow={75}
                    aria-valuemin={0}
                    aria-valuemax={100}
                  >
                    75% completed
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div className="col-md-4 mb-3">
            <div className="card">
              <div className="card-body">
                <h1
                  className="d-flex align-items-center mb-3"
                  style={{ color: "#fda417", fontSize: "26px" }}
                >
                  <i className="material-icons text-info mr-2">Projects</i>
                  Seeking investments
                </h1>
                <hr />
                <img
                  src={propertydummy}
                  alt="Admin"
                  className="rounded-circle"
                  style={{
                    marginRight: "10px",
                    maxWidth: "50px",
                    maxHeight: "50px",
                  }}
                />
                <small>Web Design project in California</small>
                <br /> <br />
                <hr />
                <img
                  src={propertydummy}
                  alt="Admin"
                  className="rounded-circle"
                  style={{
                    marginRight: "10px",
                    maxWidth: "50px",
                    maxHeight: "50px",
                  }}
                />
                <small>Web Design project in California</small>
                <br /> <br />
              </div>
            </div>
          </div>

          <div className="col-md-4">
            <div className="card mb-3">
              <div className="card-body">
              <h1
                  className="d-flex align-items-center mb-3"
                  style={{ color: "#fda417", fontSize: "26px" }}
                >
                  <i
                    className="material-icons text-info mr-2"
                    style={{ color: "#fda417", fontSize: "26px" }}
                  >
                    About 
                  </i>
                  me : 
                </h1> <hr />
               {user.aboutme}
          
              </div>
            </div>
          </div>



          <div className="col-md-4 mb-3">
            <div className="card">
              <div className="card-body">

              

                  <h1
                  className="d-flex align-items-center mb-3"
                  style={{ color: "#fda417", fontSize: "26px" }}
                >
                  <i
                    className="material-icons text-info mr-2"
                    style={{ color: "#fda417", fontSize: "26px" }}
                  >
                    Willing to  
                  </i>
                  invest: 
                </h1>
                <hr />

                    <h2 className="d-flex flex-column align-items-center text-center"
                      style={{
                        color: "#fda417",
                        border: "#fda417",
                        fontSize: "60px",
                        fontWeight: "normal",
                      }}
                    >
                      $ 500,000
                    </h2>
                 
                    <span className="d-flex flex-column align-items-center text-center">
                      <button
                        className="btn btn-primary btn-lg "
                        type="submit"
                        style={{
                          backgroundColor: "#fda417",
                          border: "#fda417",
                        }}
                      >
                        Request
                      </button>
                    </span>
                    {/* <button className="btn btn-outline-primary">Message</button> */}

<hr />
          <div className="card-body">
            <div className="row">
              <div className="col-sm-3">
                <span className="mb-0">Email</span>
              </div>
              {user.email}
              <div className="col-sm-9 text-secondary"></div>
            </div>
            <hr />
            <div className="row">
              <div className="col-sm-3">
                <span className="mb-0">Phone</span>
              </div>
               67656584687
              <div className="col-sm-9 text-secondary"></div>
            </div>
          </div>
    




                 
              
              </div>
            </div>
          </div>
          

          <div className="col-md-4  mb-3">
            <div className="card">
              <div className="card-body">
                <h1
                  className="d-flex align-items-center mb-3"
                  style={{ color: "#fda417", fontSize: "26px" }}
                >
                  <i className="material-icons text-info mr-2">Suggested</i>
                  Borrowers
                </h1>

                <ul className="list-group list-group-flush">
                  <li className="list-group-item d-flex justify-content-between align-items-center flex-wrap">
                    <h6 className="mb-0">
                      <img
                        src={profilepic}
                        style={{
                          marginTop: "0px",
                          maxWidth: "50px",
                          maxHeight: "50px",
                        }}
                      />
                      Ravichandu
                    </h6>
                    {/* <span className="text-secondary">https://bootdey.com</span> */}
                  </li>

                  <li className="list-group-item d-flex justify-content-between align-items-center flex-wrap">
                    <h6 className="mb-0">
                      <img
                        src={profilepic}
                        style={{
                          marginTop: "0px",
                          maxWidth: "50px",
                          maxHeight: "50px",
                        }}
                      />
                      Ravichandu
                    </h6>
                    {/* <span className="text-secondary">https://bootdey.com</span> */}
                  </li>

                  <li className="list-group-item d-flex justify-content-between align-items-center flex-wrap">
                    <h6 className="mb-0">
                      <img
                        src={profilepic}
                        style={{
                          marginTop: "0px",
                          maxWidth: "50px",
                          maxHeight: "50px",
                        }}
                      />
                      Ravichandu
                    </h6>
                    {/* <span className="text-secondary">https://bootdey.com</span> */}
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* <div className="col-md-4">
        <div className="card mb-3">
          <div className="card-body">
            <div className="row">
              <div className="col-sm-3">
                <h6 className="mb-0">Email</h6>
              </div>
              <div className="col-sm-9 text-secondary">{user.email}</div>
            </div>
            <hr />
            <div className="row">
              <div className="col-sm-3">
                <h6 className="mb-0">Phone</h6>
              </div>
              <div className="col-sm-9 text-secondary">(239) 816-9029</div>
            </div>
            <hr />
          </div>
        </div>
      </div> */}
    </>
  );
};

export default ProfileView;
