Untitled

/** @format */

import React, { useState } from "react";
import "./ProfileAboutPage.css";
import { useParams, useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
import Layout from "../../../layouts/main-layout.component";
import { AiOutlineGlobal } from "react-icons/ai";
import { FaUserFriends } from "react-icons/fa";

import { useSelector, useDispatch } from "react-redux";
import {
  selectToken,
  selectUser,
  selectFollowing,
} from "../../../redux/_user/userSelectors";
import { setPageType } from "../../../redux/_page/pageSlice";
import { fetchProfileDetails } from "../../../redux/_user/userSlice";
import { FaRegUserCircle } from "react-icons/fa";
import { FaLock } from "react-icons/fa";
import {
  MdOutlineAlternateEmail,
  MdOutlineEmail,
  MdOutlineLocationOn,
} from "react-icons/md";
import { GoPencil } from "react-icons/go";
import { IoCallOutline } from "react-icons/io5";
import { RiShieldUserLine } from "react-icons/ri";
import { BsGenderAmbiguous } from "react-icons/bs";
import { IoIosLink } from "react-icons/io";
import { MdOutlineDateRange, MdOutlinePrivacyTip } from "react-icons/md";
import AlertDialog from "../../../components/AlertDialog/AlertDialog";

const About = () => {
  const navigate = useNavigate();
  const { handleUn } = useParams();
  const dispatch = useDispatch();
  const token = useSelector(selectToken);
  const user = useSelector(selectUser);
  const userFollowing = useSelector(selectFollowing);
  const { t } = useTranslation(["common"]);
  const [profile, setProfile] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  React.useLayoutEffect(() => {
    dispatch(setPageType("profile_about"));
  }, []);

  const fetchData = async () => {
    setIsLoading(true);
    const data = { handleUn, token };
    const result = await dispatch(fetchProfileDetails(data));
    console.log("profile about::-", result);
    setProfile(result);
    setIsLoading(false);
  };

  // *** Fetch user details
  React.useEffect(() => {
    fetchData();
  }, [handleUn]);

  const transformData = (data) => {
    return Object.entries(data)
      .filter(([key, value]) => key !== "Add Website Link") // Skip "Add Website Link"
      .map(([key, value]) => {
        return {
          name: key.replace("website-", "Website-"), // Format the name
          link: value, // Assign the link value
        };
      });
  };

  const visibilityIconMapper = {
    Public: <AiOutlineGlobal className="visibility_icon" />,
    Followers: <FaUserFriends className="visibility_icon" />,
    "Only me": <FaLock className="visibility_icon" />,
  };
  return (
    <Layout title="Profile Information">
      <div className="profile_info_page">
        {isLoading ? (
          <>Loading</>
        ) : (
          <>
            {profile ? (
              <>
                <div className="profile_info">
                  <div className="profile_info_header">
                    <h3>{t("Basic Account Info")}</h3>
                    <button
                      onClick={() =>
                        navigate("/profile/update/user18#profile_settings")
                      }
                      className="info_edit_btn"
                    >
                      <GoPencil className="edit_icon" />
                    </button>
                  </div>
                  <ul className="info_list">
                    <li>
                      <div className="info_n_icon-wrapper">
                        <FaRegUserCircle className="info_icon" />
                        <div>
                          <h5>{profile.fn + " " + profile.ln}</h5>
                          <p className="info_title">{t("Full Name")}</p>
                        </div>
                      </div>
                    </li>
                    <li>
                      <div className="info_n_icon-wrapper">
                        <MdOutlineAlternateEmail className="info_icon" />
                        <div>
                          <h5>{profile.handleUn}</h5>
                          <p className="info_title">{t("Handle Name")}</p>
                        </div>
                      </div>
                    </li>
                    <li>
                      <div className="info_n_icon-wrapper">
                        <MdOutlineEmail className="info_icon" />
                        <div>
                          <h5>{profile.email}</h5>
                          <p className="info_title">{t("Email")}</p>
                          <p>
                            {visibilityIconMapper[profile?.emailPrivacy]}
                            <span>{profile?.emailPrivacy}</span>
                          </p>
                        </div>
                      </div>
                    </li>
                    {profile.mobile && (
                      <li>
                        <div className="info_n_icon-wrapper">
                          <IoCallOutline className="info_icon" />
                          <div>
                            <h5>{profile.mobile}</h5>
                            <p className="info_title">{t("Mobile")}</p>
                            <p>
                              {visibilityIconMapper[profile?.phNoPrivacy]}
                              <span>{profile?.phNoPrivacy}</span>
                            </p>
                          </div>
                        </div>
                      </li>
                    )}
                  </ul>
                </div>
                <div className="profile_info">
                  <div className="profile_info_header">
                    <h3>{t("About")}</h3>
                    <button
                      onClick={() =>
                        navigate("/profile/update/user18#profile_settings")
                      }
                      className="info_edit_btn"
                    >
                      <GoPencil className="edit_icon" />
                    </button>
                  </div>
                  <ul className="info_list">
                    {profile.p_bio && (
                      <li>
                        <div className="info_n_icon-wrapper">
                          <RiShieldUserLine className="info_icon" />
                          <div>
                            <h5>
                              {profile.p_bio ||
                                "Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet."}
                            </h5>
                            <p className="info_title">{t("Bio")}</p>
                            <p>
                              {visibilityIconMapper[profile?.bioPrivacy]}
                              <span>{profile?.bioPrivacy}</span>
                            </p>
                          </div>
                        </div>
                      </li>
                    )}
                    {profile.gen && (
                      <li>
                        <div className="info_n_icon-wrapper">
                          <BsGenderAmbiguous className="info_icon" />
                          <div>
                            <h5>{profile.gen || "Male"}</h5>
                            <p className="info_title">{t("Gender")}</p>
                            <p>
                              {visibilityIconMapper[profile?.genderPrivacy]}
                              <span>{profile?.genderPrivacy}</span>
                            </p>
                          </div>
                        </div>
                      </li>
                    )}
                    {profile.country && (
                      <li>
                        <div className="info_n_icon-wrapper">
                          <MdOutlineLocationOn className="info_icon" />
                          <div>
                            <h5>{profile.country}</h5>
                            <p className="info_title">{t("Country")}</p>
                            <p>
                              {visibilityIconMapper[profile?.countryPrivacy]}
                              <span>{profile?.countryPrivacy}</span>
                            </p>
                          </div>
                        </div>
                      </li>
                    )}
                    {profile.dob && (
                      <li>
                        <div className="info_n_icon-wrapper">
                          <MdOutlineDateRange className="info_icon" />
                          <div>
                            <h5>{profile.dob || "14 Nov"}</h5>
                            <p className="info_title">{t("DOB")}</p>
                            <p>
                              {visibilityIconMapper[profile?.dobPrivacy]}
                              <span>{profile?.dobPrivacy}</span>
                            </p>
                          </div>
                        </div>
                      </li>
                    )}
                  </ul>
                </div>
                <div className="profile_info">
                  <div className="profile_info_header">
                    <h3>{t("Websites")}</h3>
                    <button
                      onClick={() =>
                        navigate("/profile/update/user18#profile_settings")
                      }
                      className="info_edit_btn"
                    >
                      <GoPencil className="edit_icon" />
                    </button>
                  </div>
                  <ul className="info_list">
                    {transformData(profile.website_links).map((e) => (
                      <li>
                        <div className="info_n_icon-wrapper">
                          <IoIosLink className="info_icon" />
                          <div>
                            <h5>{e.link}</h5>
                            <p>
                              {visibilityIconMapper[profile?.websitePrivacy]}
                              <span>{profile?.websitePrivacy}</span>
                            </p>
                          </div>
                        </div>
                      </li>
                    ))}
                  </ul>
                </div>
              </>
            ) : (
              <div className="empty_profile_about">
                {t("No user details found")}
              </div>
            )}
          </>
        )}
      </div>
    </Layout>
  );
};

export default About;