import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { useTheme } from './ThemeContext';

const SettingsPage = () => {
  const [colorPalettes, setColorPalettes] = useState([]);
  const [selectedPalette, setSelectedPalette] = useState(null);
  const { theme, setColorPalette } = useTheme();

  useEffect(() => {
    const fetchColorPalettes = async () => {
      try {
        const response = await axios.get(`${import.meta.env.VITE_REACT_APP_LEUMAS_API_ENDPOINT}/configs/color-palettes`);
        setColorPalettes(response.data);
      } catch (error) {
        console.error('Error fetching color palettes:', error);
      }
    };

    fetchColorPalettes();

    const savedPalette = localStorage.getItem('selectedPalette');
    if (savedPalette) {
      const palette = JSON.parse(savedPalette);
      setSelectedPalette(palette);
      setColorPalette(palette);
    }
  }, [setColorPalette]);

  const handlePaletteChange = (event) => {
    const paletteName = event.target.value;
    const palette = colorPalettes.find(p => p.name === paletteName);
    setSelectedPalette(palette);
    setColorPalette(palette);
  };

  return (
    <div className={`theme-transition theme-${theme} p-4`}>
      <h1 className="text-xl mb-4">Settings</h1>
      <div className="mb-4">
        <label className="block mb-2">Select Color Palette:</label>
        <select onChange={handlePaletteChange} className="p-2 rounded border">
          <option value="">Select a palette</option>
          {colorPalettes.map((palette) => (
            <option key={palette.name} value={palette.name}>
              {palette.name}
            </option>
          ))}
        </select>
      </div>
      {selectedPalette && (
        <div className="mt-4">
          <h2 className="text-lg mb-2">Selected Palette: {selectedPalette.name}</h2>
          <div className="flex">
            {selectedPalette.colors.map((color, index) => (
              <div
                key={index}
                style={{ backgroundColor: color.hex }}
                className="w-1/5 h-16"
              ></div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

export default SettingsPage;