w-aura/src/hooks/lottie/useLottie.ts

import { Data } from "@lottiefiles/dotlottie-react";
import { useCallback, useEffect, useMemo, useState } from "react";
import indexedDB, { EObjectStores } from "@/services/indexedDB";

export enum ELottieKeys {
    goal = "goal",
    magnifyingGlassAndPlanet = "magnifyingGlassAndPlanet",
    scalesNeutral = "scalesNeutral",
    scalesHead = "scalesHead",
    scalesHeart = "scalesHeart",
    compass = "compass",
    handWithStars = "handWithStars",
    key = "key",
    cloudAndStars = "cloudAndStars",
    darts = "darts",
    umbrella = "umbrella",
    hourglass = "hourglass",
    lightBulb = "lightBulb",
    sun = "sun",
    handSymbols = "handSymbols",
    scalesNeutralPalmistry = "scalesNeutralPalmistry",
    scalesHeadPalmistry = "scalesHeadPalmistry",
    scalesHeartPalmistry = "scalesHeartPalmistry",
    letScan = "letScan",
    letScanDark = "letScanDark",
    scannedPhoto = "scannedPhoto",
}

export const lottieUrls = {
    [ELottieKeys.goal]: "https://lottie.host/a86e1531-7028-4688-a836-ea9d71dafa3b/Pe5G1g9s9L.lottie",
    [ELottieKeys.magnifyingGlassAndPlanet]: "https://lottie.host/beaa1dc6-cd60-4bbe-a222-c039b04c630f/ZktoTHROIW.lottie",
    [ELottieKeys.scalesNeutral]: "https://lottie.host/ddd2cb46-d62f-4808-a10d-1dd5ce8d42d2/6hgUBBGjaJ.lottie",
    [ELottieKeys.scalesHead]: "https://lottie.host/19fe41d7-d26f-431c-b063-8e123ce3d57a/HiucMMidQT.lottie",
    [ELottieKeys.scalesHeart]: "https://lottie.host/9eb3f7a1-83c2-495a-9342-c234bfebc40c/0T90l2xSWl.lottie",
    [ELottieKeys.compass]: "https://lottie.host/15b235d7-b8c9-487f-8d65-73143afc9ecc/czTjX9Lwp1.lottie",
    [ELottieKeys.handWithStars]: "https://lottie.host/25105d46-cc0a-4f76-9ad0-5e64e3eb0e52/OenfEsMruV.lottie",
    [ELottieKeys.key]: "https://lottie.host/a80ec293-6f3d-4d21-a19e-9dfb40b86a14/clQys1OEAL.lottie",
    [ELottieKeys.cloudAndStars]: "https://lottie.host/6010e02c-da90-4089-982c-177f3b5dbc05/fXkYv6hGPc.lottie",
    [ELottieKeys.darts]: "https://lottie.host/c3856d09-bfe9-44de-8712-f935f5deed67/rtD0j4YfnN.lottie",
    [ELottieKeys.umbrella]: "https://lottie.host/e353e80c-fd4a-4eca-a930-d9bf923466e0/G4sxbtkhIA.lottie",
    [ELottieKeys.hourglass]: "https://lottie.host/c1b52c33-1a3c-4759-9c5d-090ed2a62c77/IqHW4RCqVH.lottie",
    [ELottieKeys.lightBulb]: "https://lottie.host/07e33753-d13c-4469-ad33-26e57017b0ec/qMVfYwwLqs.lottie",
    [ELottieKeys.sun]: "https://lottie.host/8ae9682d-93d3-4988-8745-e7134daed217/lZG1RZgqaP.lottie",
    [ELottieKeys.handSymbols]: "https://lottie.host/ae56bb19-96e6-4147-ac94-6c9a5a24bd9d/bDBUSdzN5e.lottie",
    [ELottieKeys.scalesNeutralPalmistry]: "https://lottie.host/9027e5a7-d5e8-4e60-b097-ba4bf099b433/UsCKDjKVUr.lottie",
    [ELottieKeys.scalesHeadPalmistry]: "https://lottie.host/d16336c4-2622-48f8-b361-8d9d50b3c8a6/wWSM7JMCHu.lottie",
    [ELottieKeys.scalesHeartPalmistry]: "https://lottie.host/fa931c2d-07f5-4c57-a4bb-8302b411ecca/zy9ag3MyMe.lottie",
    [ELottieKeys.letScan]: 'https://lottie.host/77c3c34b-4c1e-4cab-87f4-40d7534fea3d/wMg1wqtSS6.lottie',//"https://lottie.host/f87184ec-aa5e-4cf4-82a5-9ab5e60c22d5/qpgweCSCtn.lottie",
    [ELottieKeys.letScanDark]: 'https://lottie.host/71623941-9182-4d58-8a1d-cb05cc5732ad/fEXKgPZQYq.lottie',//"https://lottie.host/c890243e-c61a-4e76-8b93-e8d24b25dd97/leetT4srXt.lottie",
    [ELottieKeys.scannedPhoto]: "https://lottie.host/0570b1a3-2441-486e-909b-bc2a6ceb692b/KAHTUVUb8C.lottie",
}

interface IUseLottieProps {
    preloadKey?: ELottieKeys;
    loadKey?: ELottieKeys;
}

export const useLottie = ({ preloadKey, loadKey }: IUseLottieProps) => {
    const [animationData, setAnimationData] = useState<Data>();
    const [isError, setIsError] = useState(false);
    const [isLoading, setIsLoading] = useState(false);

    const getAnimationDataFromLottie = async (key: ELottieKeys) => {
        try {
            const animation = await fetch(lottieUrls[key]);
            if (!animation.ok) {
                throw new Error(`HTTP error! status: ${animation.status}`);
            }
            const arrayBuffer = await animation.arrayBuffer();
            return arrayBuffer;
        } catch (error) {
            console.error('Error loading animation:', error);
            setIsError(true);
            return null;
        }
    }

    const preload = useCallback(async (key: ELottieKeys) => {
        console.log("preload", key);
        
        const arrayBuffer = await getAnimationDataFromLottie(key);
        indexedDB.set(EObjectStores.Lottie, key, arrayBuffer);
    }, [])

    const load = useCallback(async (key: ELottieKeys) => {
        setIsLoading(true);
        setIsError(false);
        try {
            const animationFromDB = await indexedDB.get<ArrayBuffer>(EObjectStores.Lottie, key);
            if (animationFromDB) {
                setAnimationData(animationFromDB);
                setIsLoading(false);
                return;
            }
            
            const arrayBuffer = await getAnimationDataFromLottie(key);
            if (!arrayBuffer) {
                setIsLoading(false);
                return;
            }
            
            setAnimationData(arrayBuffer);
            await indexedDB.set<ArrayBuffer>(EObjectStores.Lottie, key, arrayBuffer);
        } catch (error) {
            console.error('Error in load process:', error);
            setIsError(true);
        } finally {
            setIsLoading(false);
        }
    }, []);

    useEffect(() => {
        if (preloadKey) {
            preload(preloadKey);
        }
        if (loadKey) {
            load(loadKey);
        }
    }, [load, loadKey, preload, preloadKey])

    return useMemo(() => ({
        animationData,
        isError,
        isLoading
    }), [
        animationData,
        isError,
        isLoading
    ])
}