/* eslint-disable @typescript-eslint/no-explicit-any */
import React from "react";
type ProfileInfoCardProps = {
  allData: any; // Replace `any` with actual type of allData if known
  profilePicError: boolean;
  imagePreview: string | null;
  handleFileChange: any;
  setFieldValue: any;
  values: Record<string, any>; // You can replace `Record<string, any>` with a specific shape if known
  getFormattedAddress: (address?: string) => string;
  primaryAddressPhone?: string;
};

const ProfileInfoCard: React.FC<ProfileInfoCardProps> = ({
  allData,
  profilePicError,
  imagePreview,
  handleFileChange,
  setFieldValue,
  values,
  getFormattedAddress,
  primaryAddressPhone
}) => {
  return (
    <div className="card card-style mx-0">
      <div
        className="d-float-center justify-content-start"
        style={{ gap: "0" }}
      >
        <div className="my-profile-box">
          <div
            className="card mb-0 mt-3 ms-3 bg-6 card-profile-pic d-float-center justify-content-center"
            style={{
              backgroundImage: profilePicError
                ? `url(/images/app/upload-image-icon-png-26.jpg)`
                : imagePreview
                ? `url(${imagePreview})`
                : allData?.profilePicture
                ? `url(${allData.profilePicture})`
                : `url(/images/app/upload-image-icon-png-26.jpg)`,
              backgroundSize: "cover",
              backgroundPosition: "center",
              width: "100px",
              height: "100px",
              borderRadius: "50%",
              cursor: "pointer",
            }}
            onClick={() => document.getElementById("profilePicture")?.click()}
          >
            <div
              className="card-overlay profile-pic-shadow bg-gradient opacity-70"
              style={{ zIndex: "-1" }}
            />
            <a className="text-white font-20 hover-link">
              <i className="ri ri-upload-2-line" aria-hidden="true"></i>
            </a>
          </div>
          <input
            id="profilePicture"
            name="profile_picture"
            type="file"
            accept="image/*"
            onChange={(e) => handleFileChange(e, setFieldValue, values)}
            style={{ display: "none" }}
          />
          <div
            className="ms-3 text-center edit-btn mt-1"
            style={{ lineHeight: "normal" }}
          >
            <a
              href="#"
              className="font-10 edit-link text-red"
              style={{ fontWeight: "500" }}
            >
              <i className="fa fa-edit" aria-hidden="true"></i> Change Photo
            </a>
          </div>
        </div>
        <div className="mt-3 ms-3">
          <p className="mb-0 pb-0">
            {allData?.firstName} {allData?.lastName}{" "}
            <span title="VAT Number">
              {allData?.vatNumber ? `(${allData?.vatNumber})` : ""}
            </span>
          </p>
          <h1 className="mb-n1 color-purple font-600">
            {allData?.companyName}
            <span title="Organization Register Number">
              {allData?.companyRegistrationNumber
                ? ` - ${allData?.companyRegistrationNumber}`
                : ""} {allData?.shortCode ? `(${allData?.shortCode})` : ''}
            </span>
          </h1>
        </div>
      </div>
      <div className="content mt-3">
        <div className="d-float-center mb-0">
          <p className="mb-2 me-4 pe-0">
            {(allData?.phone || primaryAddressPhone) ? <i className="ri ri-phone-line me-2" /> : ""}
            {primaryAddressPhone || allData?.phone}
          </p>
          <p className="mb-2 text-lg-left">
            {allData?.email ? <i className="ri ri-mail-line me-2" /> : ""}
            {allData?.email}
          </p>
          {/* <i className="fa fa-map-marker me-2" /> */}
          <p className="mb-2 col-lg-12">
            {getFormattedAddress() ? (
              <>
                {/* <img
                className="order-icons img-fluid me-1"
                src="/images/icons/location.svg"
                alt="Box Icon"
                width={18}
                height={18}
              /> */}
                <i className="ri-map-pin-line position-unset mt-n2 me-2" />
              </>
            ) : (
              ""
            )}
            {getFormattedAddress()}
          </p>
        </div>
        {allData?.address ? (
          <p>
            <i className="ri-map-pin-line position-unset mt-n2" />
            {/* <img
            className="order-icons img-fluid me-1"
            src="/images/icons/location.svg"
            alt="Box Icon"
            width={18}
            height={18}
          />                            {getFullAddress(initialValues)} */}
          </p>
        ) : (
          ""
        )}
      </div>
    </div>
  );
};

export default ProfileInfoCard;