import React from 'react';
import { useControls, useStoreContext } from 'leva';
import { useDebugUMAPStore } from '../store';
import { getConfig } from '../config/mapConfig.js';

/**
 * Hook pour gérer l'interface Leva avec Zustand
 */
export function useLeva({ onResetZoom }) {
  const configs = useDebugUMAPStore((state) => state.configs);
  const currentConfigIndex = useDebugUMAPStore((state) => state.currentConfigIndex);
  const setCurrentConfigIndex = useDebugUMAPStore((state) => state.setCurrentConfigIndex);
  const useCategoryColors = useDebugUMAPStore((state) => state.useCategoryColors);
  const setUseCategoryColors = useDebugUMAPStore((state) => state.setUseCategoryColors);
  const baseGlyphSize = useDebugUMAPStore((state) => state.baseGlyphSize);
  const setBaseGlyphSize = useDebugUMAPStore((state) => state.setBaseGlyphSize);
  const darkMode = useDebugUMAPStore((state) => state.darkMode);
  const setDarkMode = useDebugUMAPStore((state) => state.setDarkMode);
  const showCentroids = useDebugUMAPStore((state) => state.showCentroids);
  const setShowCentroids = useDebugUMAPStore((state) => state.setShowCentroids);
  const resetToDefaults = useDebugUMAPStore((state) => state.resetToDefaults);
  const saveToLocalStorage = useDebugUMAPStore((state) => state.saveToLocalStorage);

  // Store Leva pour mettre à jour les contrôles
  const store = useStoreContext();

  // Configuration des contrôles Leva - Initialiser avec les valeurs du store
  const controls = useControls({
    // Slider de configuration
    Configuration: {
      value: currentConfigIndex, // Utiliser la valeur du store
      min: 0,
      max: Math.max(8, configs.length - 1), // Au moins 8 pour permettre le test
      step: 1
    },
    
    // Toggle pour les couleurs
    'Category Colors': useCategoryColors, // Utiliser la valeur du store
    
       // Slider pour la taille des glyphes
       'Glyph Size': {
         value: baseGlyphSize, // Utiliser la valeur du store
         min: getConfig('glyph.size.min', 0.05),
         max: getConfig('glyph.size.max', 1.0),
         step: getConfig('glyph.size.step', 0.05)
       },
    
    // Toggle pour le dark mode
    'Dark Mode': darkMode, // Utiliser la valeur du store
    
    // Toggle pour les centroïdes
    'Show Centroids': showCentroids, // Utiliser la valeur du store
    
    // Bouton pour reset zoom
    'Reset Zoom': { button: true },
    
    // Bouton pour reset defaults
    'Reset Defaults': { button: true }
  });

  // Mettre à jour le store Zustand quand Leva change
  React.useEffect(() => {
    if (controls.Configuration !== undefined) {
      console.log('useLeva: Configuration changée vers', controls.Configuration);
      setCurrentConfigIndex(controls.Configuration);
      saveToLocalStorage(); // Sauvegarder automatiquement
    }
  }, [controls.Configuration, setCurrentConfigIndex, saveToLocalStorage]);

  React.useEffect(() => {
    if (controls['Category Colors'] !== undefined) {
      setUseCategoryColors(controls['Category Colors']);
      saveToLocalStorage(); // Sauvegarder automatiquement
    }
  }, [controls['Category Colors'], setUseCategoryColors, saveToLocalStorage]);

  React.useEffect(() => {
    if (controls['Glyph Size'] !== undefined) {
      setBaseGlyphSize(controls['Glyph Size']);
      saveToLocalStorage(); // Sauvegarder automatiquement
    }
  }, [controls['Glyph Size'], setBaseGlyphSize, saveToLocalStorage]);

  React.useEffect(() => {
    if (controls['Dark Mode'] !== undefined) {
      setDarkMode(controls['Dark Mode']);
      saveToLocalStorage(); // Sauvegarder automatiquement
    }
  }, [controls['Dark Mode'], setDarkMode, saveToLocalStorage]);

  React.useEffect(() => {
    if (controls['Show Centroids'] !== undefined) {
      setShowCentroids(controls['Show Centroids']);
      saveToLocalStorage(); // Sauvegarder automatiquement
    }
  }, [controls['Show Centroids'], setShowCentroids, saveToLocalStorage]);

  React.useEffect(() => {
    if (controls['Reset Zoom']) {
      onResetZoom();
    }
  }, [controls['Reset Zoom'], onResetZoom]);

  React.useEffect(() => {
    if (controls['Reset Defaults']) {
      resetToDefaults();
    }
  }, [controls['Reset Defaults'], resetToDefaults]);

  // Plus besoin de synchronisation externe car Leva s'initialise avec les bonnes valeurs

  return {};
}