import { useEffect, useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import { fetchUserProperties } from "../redux/features/propertySlice";
import { NavLink } from "react-router-dom";
import propertydummy from "../img/propertydummy.jpg";

const UserProperties = () => {
  const dispatch = useDispatch();
  const { user } = useSelector((state) => ({ ...state.auth }));
  const { userProperties, totalPages } = useSelector((state) => state.property);

  const [page, setPage] = useState(1);
  const limit = 5; // Number of properties per page

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

  // Pagination handler
  const handlePageChange = (newPage) => {
    setPage(newPage);
  };

  return (
    <>
      {userProperties.length > 0 ? (
        <>
          <ul>
            {userProperties.map((property) => (
              <li key={property._id}>
                <div className="container">
                  <div className="col-md-12">
                    <div className="row p-2 bg-white border rounded mt-2">
                      <div className="col-md-3 mt-1">
                        <img
                          src={propertydummy}
                          className="w-70"
                          alt="Img"
                          style={{
                            marginTop: "0px",
                            maxWidth: "200px",
                            maxHeight: "200px",
                          }}
                        />
                      </div>
                      <div className="col-md-6 mt-1">
                        <h5>
                          {" "}
                          <NavLink
                            to={`/property/${property.propertyId}`}
                            target="_blank"
                          >
                            {property.address}
                            {"....."}
                          </NavLink>
                        </h5>
                        <div className="d-flex flex-row"></div>
                        <div className="mt-1 mb-1 spec-1">
                          <span>100% cotton</span>
                          <span className="dot" />
                          <span>Light weight</span>
                          <span className="dot" />
                          <span>
                            Best finish
                            <br />
                          </span>
                        </div>
                        <div className="mt-1 mb-1 spec-1">
                          <span>Unique design</span>
                          <span className="dot" />
                          <span>For men</span>
                          <span className="dot" />
                          <span>
                            Casual
                            <br />
                          </span>
                        </div>
                        <p className="text-justify text-truncate para mb-0">
                          There are many variations of passages of 
                          <br />
                          <br />
                        </p>
                      </div>
                      <div className="align-items-center align-content-center col-md-3 border-left mt-1">
                        {/* <div className="d-flex flex-row align-items-center">
                          <h4 className="mr-1">$14.99</h4>
                          <span className="strike-text">$20.99</span>
                        </div>
                        <h6 className="text-success">Free shipping</h6> */}
                        <div className="d-flex flex-column mt-4">
                          <NavLink
                            to={`/property/${property.propertyId}`}
                            target="_blank"
                          >
                            <button
                              className="btn btn-outline-primary btn-sm mt-2"
                              type="button"
                              style={{
                                backgroundColor: "#fda417",
                                border: "#fda417",
                              }}
                            >
                              <span
                                className="fa fa-eye"
                                style={{ color: "#F74B02" }}
                              />{" "}
                              {"  "}
                              View Details
                            </button>
                          </NavLink>

                          <NavLink
                            to={`/editproperty/${property.propertyId}`}
                            target="_blank"
                          >
                            <button
                              className="btn btn-outline-primary btn-sm mt-2"
                              type="button"
                              style={{
                                backgroundColor: "#fda417",
                                border: "#fda417",
                              }}
                            >
                              <span
                                className="fa fa-edit"
                                style={{ color: "#F74B02" }}
                              />{" "}
                              {"       "}
                              Edit Details ..
                            </button>
                          </NavLink>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
            ))}
          </ul>

          {/* Pagination Controls */}
          <div className="pagination">
            <button
              onClick={() => handlePageChange(page - 1)}
              disabled={page === 1}
            >
              Previous
            </button>

            {/* Show page numbers */}
            {Array.from({ length: totalPages }, (_, index) => index + 1).map(
              (pageNumber) =>
                pageNumber === page || // Current page
                pageNumber === 1 || // First page
                pageNumber === totalPages || // Last page
                (pageNumber >= page - 1 && pageNumber <= page + 1) ? ( // Pages near current page
                  <button
                    key={pageNumber}
                    onClick={() => handlePageChange(pageNumber)}
                    disabled={page === pageNumber}
                  >
                    {pageNumber}
                  </button>
                ) : pageNumber === 2 || pageNumber === totalPages - 1 ? ( // Add "..." between non-adjacent pages
                  <span key={pageNumber}>...</span>
                ) : null
            )}

            <button
              onClick={() => handlePageChange(page + 1)}
              disabled={page === totalPages}
            >
              Next
            </button>
          </div>
        </>
      ) : (
        <p>No active properties found.</p>
      )}
    </>
  );
};

export default UserProperties;