Untitled

'use client';

import GlobalLoading from '@/components/Global/GlobalLoading';
import { xoomBackendUrl } from '@/lib/axios/getAxios';
import useGetUserProfile from '@/lib/hooks/useGetUserProfile';
import { useSession } from 'next-auth/react';
import { useEffect, useState } from 'react';
import { FaCheckCircle } from 'react-icons/fa';
import SubscriptionForm from './SubscriptionForm';


const PACKAGE_SELECTED_CLASS =
  'ring-2 ring-red-500 scale-110 shadow shadow-gray-400';
const PACKAGE_DEFAULT_CLASS = 'ring-1 ring-white-500';

export default function SubscriptionHome() {
  const [subscriptionData, setSubscriptionData] = useState([]);
  const [selectedPackage, setSelectedPackage] = useState(0);
  const [loading, setLoading] = useState(true);
  const [userIP, setUserIP] = useState(null);
  const [isIPloading, setIsIPLoading] = useState(true);

  const { data: session } = useSession();

  useEffect(() => {
    setIsIPLoading(true);
    const fetchUserIP = async () => {
      try {
        const response = await fetch('https://api.country.is');
        if (!response.ok) {
          throw new Error('Unable to fetch IP address');
        }
        const data = await response.json();
        setUserIP(data);
        setIsIPLoading(false);
      } catch (error) {
        setIsIPLoading(false);
        console.error(error);
      }
    };
    fetchUserIP();
  }, []);

  const { userProfile, refetchProfile, userProfileLoading } =
    useGetUserProfile(session);

  useEffect(() => {
    async function getAllSubscription() {
      try {
        const { data = [] } = await xoomBackendUrl.get(`/api/subscriptions`);
        setSubscriptionData(data?.data);
        setLoading(false);

        setSelectedPackage(data.length > 0 ? data[0] : 0);
      } catch (error) {
        console.error('Error fetching subscription data:', error);
        setLoading(false);
      }
    }

    getAllSubscription();
  }, []);

  const handlePackageClick = (packageData) => {
    setSelectedPackage(packageData);
  };

  const countryCode = userIP?.country;
  const filteredPackages = filterPriceWithIp(subscriptionData, countryCode);
  const firstPackagePrice = filteredPackages[0]?.price[0];
  return (
    <div className="mx-auto max-w-screen-xl mt-3">
      {loading || userProfileLoading || isIPloading ? (
        <GlobalLoading />
      ) : (
        <div className="bg-white text-black mt-2 sm:mt-5">
          <div className="flex flex-col md:flex-row  items-center sm:justify-around justify-start sm:gap-10  mt-2 lg:mt-10 px-10">
            {/*  */}
            {filteredPackages?.map((packageData, index) => (
              <div
                key={packageData?._id}
                onClick={() => handlePackageClick(index)}
                className={`bg-primary rounded-3xl p-4 xl:p-8 mt-5 lg:mt-0 ${parseInt(selectedPackage) === parseInt(index)
                  ? PACKAGE_SELECTED_CLASS
                  : PACKAGE_DEFAULT_CLASS
                  } cursor-pointer`}
              >
                <div className="flex items-center justify-between gap-x-4">
                  <h2 className="text-sm lg:text-lg font-semibold leading-8 text-white">
                    {packageData?.title}
                  </h2>
                  {index > 0 && (
                    <p className="text-red-500 line-through">
                      {firstPackagePrice?.value}
                      {firstPackagePrice?.currency_code}/m
                    </p>
                  )}
                </div>
                <p className="mt-4 text-sm leading-6 text-gray-300">
                  Total Package price:{' '}
                  <span className="text-sm sm:text-lg text-green-500">
                    {packageData?.price[0].value}{' '}
                    {packageData?.price[0].currency_code}
                  </span>
                </p>
                <p className="mt-6 flex items-baseline gap-x-1">
                  <span className="text-base lg:text-4xl font-bold tracking-tight text-white">
                    {(
                      packageData?.price[0].value / packageData?.duration
                    ).toFixed(2)}{' '}
                    {packageData?.price[0].currency_code}/ month
                  </span>
                </p>
                <div className="flex items-center justify-center mt-3">
                  <a
                    href="#order"
                    aria-describedby=""
                    className={`btn btn-sm rounded-md ${parseInt(selectedPackage) === parseInt(index)
                      ? 'btn-secondary'
                      : ''
                      }`}
                  >
                    Get Now
                  </a>
                </div>
              </div>
            ))}
          </div>

          <br />
          <br />
          {filteredPackages.length > 0 ? <>
            <div className="divider m-0 bg-white">
              <div className="bg-[#FB0405] py-2 text-white">
                <span className="p-5 cursor-pointer">{`Package Details for ${subscriptionData?.[selectedPackage]?.title}`}</span>
              </div>
            </div>
            <br />
            {/* description  */}
            <div div id="order" className="grid grid-cols-12 gap-5 px-5 mt-10" >
              <div className="col-span-12 lg:col-span-7">
                {/*  */}
                {filteredPackages?.map((item, index) => (
                  <div key={index}>
                    {parseInt(selectedPackage) === parseInt(index) && (
                      // <></>
                      <SubscriptionForm
                        title={item.title}
                        price={item.price[0].value}
                        currency={item.price[0].currency_code}
                        subscriptionType={item.duration_type}
                        session={session}
                        userProfile={userProfile}
                      />
                    )}
                  </div>
                ))}
              </div>
              <div className="col-span-12 lg:col-span-5">
                <div className="bg-primary p-5 -skew-y-[0.5deg]">
                  <h4 className="text-base sm:text-xl font-semibold py-3 text-white">
                    Package Benefits
                  </h4>
                  {subscriptionData?.[selectedPackage]?.descriptions.map(
                    (description, index) => (
                      <div
                        key={index}
                        className="px-4 flex gap-2 border border-gray-300 bg-gray-600 rounded py-3 mt-2 skew-y-[0.5deg]"
                      >
                        <div>
                          <FaCheckCircle className="text-white inline-block align-text-bottom mr-2 text-sm sm:text-xl" />
                        </div>
                        <p className="text-gray-200 text-semibold text-sm sm:text-xl mt-1 sm:mt-0">
                          {description}
                        </p>
                      </div>
                    )
                  )}
                </div>
              </div>
            </div>
          </> : <>
            <div className="max-w-md mx-5 sm:mx-auto p-6   bg-green-400 rounded-md shadow-md text-center">
              <h2 className="text-2xl font-semibold mb-4">Subscription Package Unavailable</h2>

              <h6 className="text-black mb-4">
                We{"'"}re currently working on improving our services. The subscription package is temporarily unavailable at the moment.
                Please check back later to explore our exciting subscription options.
              </h6>

              <p className="text-black ">
                Thank you for your patience and understanding. If you have any questions, feel free to contact our support team.
              </p>
            </div>

          </>}

        </div>
      )}
    </div>
  );
}

const filterPriceWithIp = (subscriptionArray, countryCode) => {
  return subscriptionArray.map((subscription) => {
    const matchingPrice = subscription.price.find(
      (price) => price.country_code === countryCode
    );

    if (matchingPrice) {
      // If matching price is found, return the subscription with the matching price
      return {
        ...subscription,
        price: [matchingPrice],
      };
    } else {
      // If no matching price is found, return the subscription with the USD price
      const defaultUsdPrice = subscription.price.find(
        (price) => price.country_code === 'US'
      );

      return {
        ...subscription,
        price: [defaultUsdPrice],
      };
    }
  });
};