import { forwardRef } from "react";
import QRCode from "react-qr-code";
import { useSelector } from "react-redux";
import LoadingSpinner from "../../Spinners/LoadingSpinner";

const FamilyAccount = forwardRef(({ familyData, myRef, handlePrint}, ref) => {
  const { userDetails } = useSelector((state) => state.userDetails);
  return (
    <div
      className="w-full lg:min-h-[538px] p-3 h-full flex flex-col items-center justify-center"
      ref={myRef}
    >
      <div className="update-table w-full lg:min-h-[450px] h-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow ">
        <div className="flex items-center justify-around h-[380px]">
          <div className="flex flex-col">
            <h2 className="print:block hidden font-bold text-lg tracking-wide text-dark-gray dark:text-white capitalize mb-10">
              Firstname: {familyData?.data?.firstname ? familyData?.data?.firstname : "please wait..."}
            </h2>
            <h2 className="font-bold text-lg tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
              Username:{" "}
              <span className="ml-2 normal-case">
                {familyData?.data?.username ? familyData?.data?.username : "please wait..."}
              </span>
            </h2>
            <h2 className="font-bold text-lg tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
              Pin:{" "}
              <span className="ml-2 normal-case">
                {familyData?.data?.pin ? familyData?.data?.pin : "please wait..."}
              </span>
            </h2>
          </div>

          <span className="text-5xl text-gray-400 opacity-20 font-bold">
            or
          </span>

          <div className="max-w-[200px]">
            <p className="text-xl tracking-wide mb-[15px] text-center font-bold text-dark-gray dark:text-white">
              Scan the code from mobile app
            </p>
            {familyData.loading ?
            <div className="w-full">
              <LoadingSpinner size='8' color='sky-blue' />
            </div>
            :
            <QRCode
              size={256}
              style={{ height: "auto", maxWidth: "100%", width: "100%" }}
              // value={`https://www.google.com`}
              value={`${userDetails?.uid}@${familyData?.data?.username}@${familyData?.data?.uid}`}
              viewBox={`0 0 256 256`}
            />
            }
          </div>
        </div>
        <div className="h-[50px] w-full flex justify-center items-center">
          <button
            className="btn-shine w-[116px] h-[46px] text-white rounded-full text-base bg-pink flex justify-center items-center"
            onClick={handlePrint}
          >
            Print
          </button>
        </div>
      </div>
    </div>
  );
});

export default FamilyAccount;