import React, { useEffect, useState } from "react";
import { sendGAEvent } from "@next/third-parties/google";

const CallForce = () => {
  const [showInfo, setShowInfo] = useState(false);
  const [showProgressBar, setShowProgressBar] = useState(false);

  useEffect(() => {
    const timer = setTimeout(() => {
      setShowInfo(true);
      setShowProgressBar(true);
      const progressBarTimer = setTimeout(() => {
        setShowProgressBar(false);
        setShowInfo(false);
      }, 10000); // 10 ثانیه

      return () => clearTimeout(progressBarTimer);
    }, 10000); // 30 ثانیه

    return () => clearTimeout(timer); // پاک کردن تایمر در هنگام تخریب کامپوننت
  }, []);

  return (
    <div className="relative">
      <div className="fixed bottom-0 flex justify-end w-full !z-50  ">
        <a
          href={`tel:${process.env.NEXT_PUBLIC_PHONE_NUMBER_STAND}`}
          onClick={() => sendGAEvent({ event: "buttonClicked", value: "hi" })}
        >
          <div className="w-[60px] h-[60px] rounded-full bg-primary-600 m-3 pt-4 shadow">
            <svg
              width="25"
              height="25"
              viewBox="0 0 118 118"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              className="mx-auto "
            >
              <path
                d="M112.295 78.8474L84.6915 66.4783L84.6153 66.4431C83.1823 65.8302 81.619 65.5843 80.0671 65.7275C78.5151 65.8707 77.0233 66.3986 75.7266 67.2635C75.5739 67.3642 75.4271 67.4737 75.2872 67.5916L61.0254 79.7498C51.9903 75.3611 42.6622 66.1033 38.2735 57.1853L50.4493 42.7068C50.5665 42.5603 50.6778 42.4139 50.7833 42.2557C51.6295 40.9625 52.143 39.4802 52.2779 37.9406C52.4128 36.4011 52.1651 34.8521 51.5567 33.4314V33.3611L39.1524 5.71073C38.3481 3.85486 36.9652 2.30886 35.2101 1.30353C33.455 0.2982 31.4218 -0.112547 29.4141 0.132603C21.4745 1.17737 14.1867 5.07656 8.91177 11.1019C3.63689 17.1273 0.735698 24.8667 0.750053 32.8748C0.750053 79.3982 38.6016 117.25 85.1251 117.25C93.1331 117.264 100.873 114.363 106.898 109.088C112.923 103.813 116.822 96.5254 117.867 88.5857C118.113 86.5787 117.703 84.546 116.699 82.791C115.694 81.036 114.15 79.6527 112.295 78.8474ZM85.1251 107.875C65.2405 107.853 46.1765 99.9443 32.116 85.8838C18.0555 71.8233 10.1468 52.7594 10.1251 32.8748C10.103 27.153 12.1644 21.6189 15.9243 17.3059C19.6842 12.9929 24.8854 10.1959 30.5567 9.43729C30.5543 9.46067 30.5543 9.48422 30.5567 9.5076L42.8614 37.0467L30.7501 51.5428C30.6269 51.684 30.5152 51.8349 30.4161 51.9939C29.5343 53.347 29.0171 54.9048 28.9144 56.5166C28.8117 58.1283 29.1272 59.7392 29.8301 61.1932C35.1387 72.0506 46.0782 82.908 57.0528 88.2107C58.5174 88.9071 60.1377 89.2116 61.7552 89.0946C63.3727 88.9775 64.9322 88.4428 66.2813 87.5428C66.4321 87.4419 66.5768 87.3323 66.7149 87.2146L80.959 75.0623L108.498 87.3963H108.563C107.813 93.0756 105.02 98.2873 100.707 102.056C96.3928 105.826 90.8535 107.894 85.1251 107.875Z"
                fill="white"
              />
            </svg>
          </div>
        </a>

        {showInfo && (
          <a href={`tel:${process.env.NEXT_PUBLIC_PHONE_NUMBER_STAND}`}>
            <div className="absolute bottom-full m-3 right-0 w-fit bg-white p-5 rounded-lg shadow">
              <h4>ارتباط مستقیم با دکتر مهرداد نادعلی</h4>
              <p className="text-gray-800 text-right text-sm">
                وکیل پایه یک دادگستری
              </p>
              <div className="h-2 bg-primary-600 rounded-full progress-bar mt-5"></div>
            </div>
          </a>
        )}
      </div>
    </div>
  );
};

export default CallForce;