import "primereact/resources/primereact.css";
import "primereact/resources/themes/saga-blue/theme.css";
import "primeicons/primeicons.css";
import "rsuite/dist/rsuite.min.css";
import "react-toastify/dist/ReactToastify.css";
import { ToastContainer } from "react-toastify";
import { toClaimUserProfileRequest } from "@/services/public";
import { useEffect, useState } from "react";
import { useRouter } from "next/router";
import { ScaleLoader } from "react-spinners";

interface UserProfileData {
  name: string;
  username: string;
  email: string;
  billing_company: string;
  phone: number;
  dot_number: number;
  fax: string;
}

function ClaimProfileDetail() {
  const [isloading, setIsloading] = useState(true);
  const router = useRouter();
  const user_id: string | string[] | undefined = router?.query?.id;
  const [userProfileRecord, setUserProfileRecord] = useState<
    UserProfileData | undefined
  >();

  useEffect(() => {
    toGetClaimUserProfileDetail(user_id);
  }, []);

  const toGetClaimUserProfileDetail = (userId: any) => {
    setIsloading(true);
    toClaimUserProfileRequest(userId).then((response) => {
      if (response?.status === "success") {
        setIsloading(false);
        setUserProfileRecord(response.data);
      } else {
        setIsloading(false);
      }
    });
  };

  const handleBackButton = () => {
    router.back()
  };

  const mainClaimProfileDetailContent = (
    <div style={{ position: "relative" }}>
      {isloading && (
        <div id="loader_table">
          <ScaleLoader color="#3180f3" className="table_loader" />
        </div>
      )}
      <ToastContainer />
      <div>
        <section className="profile_body mb-3">
          <div className="profile_heading d-flex justify-content-between">
            <h3>Carrier Profile</h3>
            <button
              className="btn btn-sm btn-primary"
              onClick={handleBackButton}
            >
              <i className="bi bi-arrow-left-circle"></i>&nbsp;Back
            </button>
          </div>

          <div className="profile_edit_body my-3">
            <div className="profile_data d-flex align-items-center">
              <img
                className="profile_user_image"
                src="/images/Avatar.png"
                alt="Avtar image"
              />
              <div className="profile_name_block">
                <h4>
                  {userProfileRecord?.name ? userProfileRecord?.name : "N/A"}
                </h4>
                <p>
                  Project Manager
                  <br />
                  Biffco Enterprises Ltd.
                </p>
              </div>
            </div>
          </div>

          <div className="profile_edit_body my-3">
            <div className="profile_data_details">
              <h3>Personal Profile</h3>
              <div className="d-flex genral_details">
                {userProfileRecord?.name && (
                  <div className="sepret_data">
                    <label className="form-label">Name</label>
                    <p>{userProfileRecord?.name}</p>
                  </div>
                )}
                {userProfileRecord?.username && (
                  <div className="sepret_data">
                    <label className="form-label">Username</label>
                    <p>{userProfileRecord?.username}</p>
                  </div>
                )}
              </div>
              <div className="d-flex genral_details">
                {userProfileRecord?.email && (
                  <div className="sepret_data">
                    <label className="form-label">Email Address</label>
                    <p>{userProfileRecord?.email}</p>
                  </div>
                )}
                {userProfileRecord?.billing_company && (
                  <div className="sepret_data">
                    <label className="form-label">Company Address</label>
                    <p>{userProfileRecord?.billing_company}</p>
                  </div>
                )}
              </div>
            </div>
          </div>

          <div className="profile_edit_body my-3">
            <div className="profile_data_details">
              <h3>Current Address</h3>
              <div className="d-flex genral_details">
                {userProfileRecord?.phone && (
                  <div className="sepret_data">
                    <label className="form-label">Phone Number</label>
                    <p>{userProfileRecord?.phone}</p>
                  </div>
                )}
                {userProfileRecord?.billing_company && (
                  <div className="sepret_data">
                    <label className="form-label">
                      Corporate/Billing Address
                    </label>
                    <p>{userProfileRecord?.billing_company}</p>
                  </div>
                )}
              </div>
              <div className="d-flex genral_details">
                {userProfileRecord?.dot_number && (
                  <div className="sepret_data">
                    <label className="form-label">DOT Number</label>
                    <p>{userProfileRecord?.dot_number}</p>
                  </div>
                )}
                {userProfileRecord?.fax && (
                  <div className="sepret_data">
                    <label className="form-label">Fax number</label>
                    <p>{userProfileRecord?.fax}</p>
                  </div>
                )}
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  );

  return <>{mainClaimProfileDetailContent}</>;
}

export default ClaimProfileDetail;