List Files | Just Commands | Repo | Logs

← back | Copy

import { ref } from 'vue';
import { getLogo, saveLogo, deleteLogo, type LogoType } from '@/lib/logoStorage';

// Shared state for logos
const logoSquare = ref<string | null>(null);
const logo = ref<string | null>(null);

export const useLogo = () => {
  /**
   * Load all logos from IndexedDB
   */
  const loadLogos = async () => {
    try {
      const squareLogo = await getLogo('logo-square');
      const fullLogo = await getLogo('logo');

      if (squareLogo) {
        logoSquare.value = squareLogo;
      }

      if (fullLogo) {
        logo.value = fullLogo;
      }
    } catch (error) {
      console.error('[useLogo] Error loading logos:', error);
    }
  };

  /**
   * Upload and save a logo
   */
  const uploadLogo = async (type: LogoType, dataUrl: string) => {
    try {
      await saveLogo(type, dataUrl);

      if (type === 'logo-square') {
        logoSquare.value = dataUrl;
      } else {
        logo.value = dataUrl;
      }
    } catch (error) {
      console.error(`[useLogo] Error uploading ${type}:`, error);
      throw error;
    }
  };

  /**
   * Remove a logo
   */
  const removeLogo = async (type: LogoType) => {
    try {
      await deleteLogo(type);

      if (type === 'logo-square') {
        logoSquare.value = null;
      } else {
        logo.value = null;
      }
    } catch (error) {
      console.error(`[useLogo] Error removing ${type}:`, error);
      throw error;
    }
  };

  /**
   * Get logo URL for a specific type
   */
  const getLogoUrl = (type: LogoType): string | null => {
    return type === 'logo-square' ? logoSquare.value : logo.value;
  };

  return {
    logoSquare,
    logo,
    loadLogos,
    uploadLogo,
    removeLogo,
    getLogoUrl
  };
};