import { FuseLoader } from '@fuseloader/lite';

const App = () => {
  return (
    <FuseLoader
      onFileUpload={handleFileUpload}
      allowedTypes={['csv', 'excel']}
      maxSize={5 * 1024 * 1024}
      googleAnalytics={{
        enabled: true,
        trackingId: 'G-XXXXXXXXXX' // Replace with actual Google Analytics 4 Measurement ID
      }}
    />
  );
};

import React from 'react';
import { FuseLoader, SheetRow, FuseLoaderConfig } from '@fuseloader/lite';

function App() {
  const handleFileUpload = (file: File, sheetData: SheetRow[]) => {
    console.log('File uploaded:', file);
    console.log('Sheet data:', sheetData);
  };

  const handleNotification = (message: string, type: 'success' | 'error' | 'warning' | 'info') => {
    console.log(`Custom notification - ${type}: ${message}`);
  };

  const handleClose = () => {
    console.log('FuseLoader closed');
    // Implement your desired close behavior here
  };

  const customConfig: FuseLoaderConfig = {
    allowedTypes: ['csv', 'excel'],
    maxSize: 5 * 1024 * 1024, // 5MB
    theme: 'dark',
    animations: {
      dropZone: true,
      processProgress: true,
      filePreview: true,
    },
    labels: {
      title: "Custom File Upload",
      dropZoneText: "Drop your file here",
      browseText: "choose file",
      maxSizeText: "Max size: {size}",
      processingText: "Processing your file...",
      processButtonText: "Upload File",
      downloadTemplateText: "Download Template"
    },
    brandColors: {
      primary: '#9b59b6',
      secondary: '#f1c40f',
      accent: '#1abc9c',
    },
    notificationOptions: {
      position: 'top-right',
      duration: 100,
    },
    showCloseIcon: true,
    useCardStyle: true,
    template: {
      enabled: true,
      url: 'https://example.com/template.csv',
      filename: 'custom_template.csv'
    },
    customCSS: {
      button: {
        fontFamily: 'Arial, sans-serif',
        fontSize: '14px',
        letterSpacing: '0.5px',
      },
      labels: {
        fontSize: '14px',
        fontFamily: 'Roboto, sans-serif',
        lineHeight: '1.5',
      },
    },
    returnNotificationString: true,
  };

  return (
    <div className="min-h-screen p-4 space-y-8">
      <div className="flex flex-col items-center gap-8 max-w-3xl mx-auto">
        <FuseLoader
          onFileUpload={handleFileUpload}
          showCloseIcon={false}
          useCardStyle={false}
          allowedTypes={['csv']}
          maxSize={1 * 1024 * 1024} // 1MB
        />

        <FuseLoader
          onFileUpload={handleFileUpload}
          {...customConfig}
          onNotification={handleNotification}
          onClose={handleClose}
          formatValidation={(file: File) => {
            // Custom format validation logic
            return new Promise((resolve, reject) => {
              if (file.size > 1024 * 1024) { // 1MB
                reject(new Error('File size must be less than 1MB'));
              } else {
                resolve(true);
              }
            });
          }}
        />
      </div>
    </div>
  );
}

export default App;